How can I center both buttons on the mobile version?

Site URL: https://leopard-turquoise-lyjf.squarespace.com/?p

I want to center both buttons on the mobile version. The password is: beyondfiction

Thanks in advance.

I added a bored to the buttons while I was working on it, so I could see what I was doing. So I will post both of the codes for you.

WITH THE BORDER AND A HOVER EFFECT:

#page-section-5f6de80e2196ec2ee3226127 .row:nth-child(2) {
  display: flex !important;
}

#page-section-5f6de80e2196ec2ee3226127 .row:nth-child(2) .col {
  width: 50% !important;
}

#page-section-5f6de80e2196ec2ee3226127 .row:nth-child(2) .col .sqs-block-button-container--right,
#page-section-5f6de80e2196ec2ee3226127 .row:nth-child(2) .col .sqs-block-button-container--left{
  text-align: center !important;
  background: rgba(0, 0, 0, .4) !important;
  border: 1px solid rgba(255, 255, 255, .4) !important;
  transition: all 1000ms !important;
}

#page-section-5f6de80e2196ec2ee3226127 .row:nth-child(2) .col .sqs-block-button-container--right:hover,
#page-section-5f6de80e2196ec2ee3226127 .row:nth-child(2) .col .sqs-block-button-container--left:hover {
  background: rgba(0, 0, 0, 1) !important;
  border: 1px solid rgba(255, 255, 255, 1) !important;
}

WITHOUT THE BORDER:

#page-section-5f6de80e2196ec2ee3226127 .row:nth-child(2) {
  display: flex !important;
}

#page-section-5f6de80e2196ec2ee3226127 .row:nth-child(2) .col {
  width: 50% !important;
}

#page-section-5f6de80e2196ec2ee3226127 .row:nth-child(2) .col .sqs-block-button-container--right,
#page-section-5f6de80e2196ec2ee3226127 .row:nth-child(2) .col .sqs-block-button-container--left{
  text-align: center !important;
}