Как сделать, чтобы все кнопки были одинакового размера и по центру? ⇐ Html

[Anonymous]

В настоящее время я создаю веб-сайт и хочу включить эти кнопки, так как они есть в моем дизайне:
Скриншот дизайна веб-сайта
Они все одинакового размера, одинаково разнесены и центрированы по пространству, а размер текста соответствует размеру поля.
Кнопки у меня работают, но теперь я хочу, чтобы они имели правильный размер и расположение на странице. Сейчас у меня это выглядит так:
Скриншот реализованных кнопок
Как мне сделать так, чтобы все они были квадратными и равномерно распределялись по экрану, а текст масштабировался в зависимости от размера контейнера?
Текущий HTML:

Discover what Haapsalu has to offer:

HistoryUncover the past
EventsSee what's happening
AttractionsThings to do
TravelGetting around Haapsalu


Текущий CSS:
.mainButtons button{
border-style: solid;
border-width: 2px;
border-color: #724f3a;
background-color: white;
color: black;
text-align: center;
padding: 1vw 1vw;
padding-left: 2vw;
padding-right: 2vw;
margin-left: 2vw;
margin-right: 2vw;
text-decoration: none;
font-size:3vw;
font-family: Georgia, serif;
cursor: pointer;
}

button span{
display: block;
text-align: center;
}

button span:last-child {
padding-top: 0.5vw;
font-size:1.25vw;
}


Подробнее здесь: https://stackoverflow.com/questions/797 ... nd-centred