.modal button a{
  color: white !important;
}
.show-modal {
  font-size: 18px;
  color: var(--main-color);
  border-bottom: 2px solid transparent;
}

.show-modal:hover {
  border-bottom: 2px solid var(--main-color);
}


.modal__content h2 {
  font-size: 30px;
  line-height: 1.2;
}


.modal__content p {
  font-size: 18px;
}

.close-modal-x a:hover svg path {
  fill:  var(--alert-color);
}

.modal-text-link a {
  font-size: 18px;
  color: var(--main-75-color);
  text-decoration: none;  
}

.modal-text-link a:hover {
  color: var(--white-color);
  text-decoration: underline;  
}

.mask-modal {
  background: rgba(0, 0, 0, 0.6);
}

.modal {
  background: var(--white-color);
  color: var(--white-color);
}



/* Tablet Portrait */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

}


/* Tablet Landscape */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

}


/* Mobile Portrait */
@media only screen and (max-width: 767px) {
  
  .show-modal {
    font-size: 14px;
  }

  .modal__content h2 {
    font-size: 24px;
    line-height: 1.2;
  }


  .modal__content p {
    font-size: 16px;
  }

  .modal-text-link a {
    font-size: 14px;
  }

}