.main-container .gt-container .gt-button.center .holder {
  text-align: center;
}
.main-container .gt-container .gt-button.full .holder a {
  display: block;
  text-align: center;
}
.main-container .gt-container .gt-button .holder a {
  text-decoration: none !important;
}

/**

Buttons should be full width regardless of setting in mobile.
https://it.github.gatech.edu/coe-web/helluva_engineer_block_button/issues/48

**/
@media only screen and (max-width: 576px) {
  .main-container .gt-container .gt-button .holder a {
    /**
    Color variants for some reason take priority over this, so add an
    aggressive !important for now
    **/
    display: block !important;
    text-align: center;
  }
}

/**
Adding background color options
**/

/** GOLD **/
.main-container .gt-container .button-bg-gt-gold .gt-button a:not(.use-ajax),
.main-container .gt-container .button-bg-gt-gold .gt-button a {
  color: #000 !important;
  background: var(--gt-gold) !important;
  border: none;
}

.main-container .gt-container .button-bg-gt-gold .gt-button a:not(.use-ajax):hover,
.main-container .gt-container .button-bg-gt-gold .gt-button a:hover {
  background: color-mix(in oklab, var(--gt-gold), black 10%) !important;
  color: #000 !important;
}

.main-container .gt-container .button-bg-gt-gold .gt-button a:link:after,
.main-container .gt-container .button-bg-gt-gold .gt-button a:visited::after {
  background-color: #000;
}

/** WHITE **/
.main-container .gt-container .button-bg-white .gt-button a:not(.use-ajax),
.main-container .gt-container .button-bg-white .gt-button a {
  color: #000 !important;
  background: #fff !important;
  border: none;
}

.main-container .gt-container .button-bg-white .gt-button a:not(.use-ajax):hover,
.main-container .gt-container .button-bg-white .gt-button a:hover {
  background: color-mix(in oklab, #fff, black 10%) !important;
  color: #000 !important;
}

.main-container .gt-container .button-bg-white .gt-button a:link:after,
.main-container .gt-container .button-bg-white .gt-button a:visited::after {
  background-color: #000;
}

/** BLACK **/
.main-container .gt-container .button-bg-black .gt-button a:not(.use-ajax),
.main-container .gt-container .button-bg-black .gt-button a {
  color: #fff !important;
  background: #000 !important;
  border: none;
}

.main-container .gt-container .button-bg-black .gt-button a:not(.use-ajax):hover,
.main-container .gt-container .button-bg-black .gt-button a:hover {
  background: color-mix(in oklab, #000, white 30%) !important;
  color: #fff !important;
}

.main-container .gt-container .button-bg-black .gt-button a:link:after,
.main-container .gt-container .button-bg-black .gt-button a:visited::after {
  background-color: #fff;
}

/** Blue **/
.main-container .gt-container .button-bg-gt-blue .gt-button a:not(.use-ajax),
.main-container .gt-container .button-bg-gt-blue .gt-button a {
  color: #fff !important;
  background: #003057 !important;
  border: none;
}

.main-container .gt-container .button-bg-gt-blue .gt-button a:not(.use-ajax):hover,
.main-container .gt-container .button-bg-gt-blue .gt-button a:hover {
  background: color-mix(in oklab, #003057, black 10%) !important;
  color: #fff !important;
}

.main-container .gt-container .button-bg-gt-blue .gt-button a:link:after,
.main-container .gt-container .button-bg-gt-blue .gt-button a:visited::after {
  background-color: #fff;
}
