How to make by buttons all be uniform size and centred?

I'm currently making a website and I want to include these buttons, as I have them in my design: Screenshot of website design

They are all of the same size, equally spaced out and centred across the space, and the text is sized according to the size of the box. I have the buttons working, but I now want to get them into the proper size and location on the page. I currently have it like this: Screenshot of the implemented buttons

How can I go about setting them to all be square and spread equally across the screen, with the text scaling with the size of its container?

Current HTML:

<div class="mainButtons">
        <h1>Discover what Haapsalu has to offer:</h1>

        <button type="button"; onclick="location.href='history.html'"><span>History</span><span>Uncover the past</span></button>
        <button type="button"; onclick="location.href='events.html'"><span>Events</span><span>See what's happening</span></button>
        <button type="button"; onclick="location.href='attractions.html'"><span>Attractions</span><span>Things to do</span></button>
        <button type="button"; onclick="location.href='travel.html'"><span>Travel</span><span>Getting around Haapsalu</span></button>
        
    </div>

Current 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;
}

Solution

Unfortunately scaling font size based on container width isn't an easy task, especially without javascript.
You can read this article to get some ideas. https://css-tricks.com/fitting-text-to-a-container/

Other than that, I think this would work.

.mainButtons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 4vw;
  padding: 1vw 3vw;
}

.mainButtons>a {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: black;
  border-style: solid;
  border-width: 2px;
  border-color: #724f3a;
  text-align: center;
  text-decoration: none;
}

.mainButtons>a>span {
  display: inline-block;
  margin-bottom: 1vw;
  font-family: Georgia, serif;
}

.mainButtons>a>span.buttonName {
  font-size: 3vw;
}

.mainButtons>a>span.buttonDescription {
  font-size: 1.25vw;
}

<h1>Discover what Haapsalu has to offer:</h1>
<div class="mainButtons">
  <a href="history.html">
    <span class="buttonName">History</span>
    <span class="buttonDescription">Uncover the past</span>
  </a>
  <a href="events.html">
    <span class="buttonName">Events</span>
    <span class="buttonDescription">See what's happening</span>
  </a>
  <a href="attractions.html">
    <span class="buttonName">Attractions</span>
    <span class="buttonDescription">Things to do</span>
  </a>
  <a href="travel.html">
    <span class="buttonName">Travel</span>
    <span class="buttonDescription">Getting around Haapsalu</span>
  </a>
</div>