.reservations {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80vw;
  margin-inline: 10vw;
  margin-bottom: 8em;
}

.reservations-title,
.reservations-title-formulas {
  text-align: center;
  width: 100%;
  margin-bottom: min(4vh, 4vw);
  font-family: 'rama-gothic-c';
  font-weight: bold;
  font-size: max(6vw, 6vh);
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
}

.reservations-title-formulas {
  font-size: max(4.5vh,4.5vw);
}

.reservations-title::after,
.reservations-title-formulas::after,
.reservations-title::before,
.reservations-title-formulas::before {
  content: '\1F47D';
  font-size: 30%;
  margin-inline: 1rem;
}

.formulas-section {
  width: 100%;
  min-height: max(22vh, 22vw);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.formulas-subtitle {
  font-size: min(2em, 2vw);
  margin-bottom: max(2em, 2vw);
}

.formulas-choice {
  font-family: 'rama-gothic-c';
  font-weight: bold;
  font-size: 6em;
  text-transform: uppercase;
  margin-bottom: max(1.2vw, 1.2vh);
}

.formulas-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: 1em;
  width: 100%;
  margin-inline: auto;
}

.formula-card {
  position: relative;
  width: 100%;
  height: 100%;
  border: 1px solid rgb(227, 227, 227);
  border-radius: .8em;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  cursor: pointer;
}

.formula-card:hover {
  box-shadow: 0px 0px 8px rgba(255, 255, 255, 0.4);
}

.formula-card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  background-color: black;
}

.formula-bg-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.5;
  filter: blur(2px);
}

.formula-bg {
  height: 100%;
  min-width: 100%;
  object-fit: cover;
  object-position: center;
  transform-origin: center;
  transition: transform 200ms ease-in-out;
}

.formula-card:hover .formula-bg {
  transform: scale(1.1);
}

.formula-card-header {
  background-image: linear-gradient( 90deg, rgba(24, 24, 24, 0.75) 0%, rgba(54, 54, 54, 0.75) 100% );
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: 2em;
  min-height: 15em;
}

.formula-title {
  font-family: 'rama-gothic-c';
  font-size: 6em;
  font-weight: bold;
  line-height: 80%;
  text-transform: uppercase;
}

.formula-subtitle {
  margin-top: .5em;
  font-size: 1.4em;
  text-align: center;
  width: 100%;
  padding-inline: 10%;
}

.formula-description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 25vh;
  margin: 0;
  margin-block: auto;
  padding: 0;
  padding-block: 3em;
}

.formula-desc-li::before {
  content: '\2714';
  margin-right: .5em;
}

.formula-desc-li {
  list-style: none;
  font-size: 130%;
  text-align: center;
  margin-block: .1em;
}

.formula-price {
  text-align: center;
  width: 100%;
  font-size: 2em;
  font-weight: bold;
  margin-bottom: 1em;
}

.formula-price :nth-child(1) {
  font-weight: normal;
  line-height: 90%;
}

.formula-price :nth-child(2) {
  font-size: 150%;
}

.formulas-btn {
  width: 100%;
  padding: 1% 2%;
  margin-top: max(1vw, 1vh);
  font-family: 'rama-gothic-c';
  font-weight: bold;
  font-size: max(1.7vw, 1.7vh);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: white;
  background-color: rgba(30, 30, 28, 0.75);
  border-radius: min(1vw, 1vh);
  cursor: pointer;
}

.formulas-btn:hover {
  box-shadow: 0px 0px 8px rgba(255, 255, 255, 0.15);
}

.disclaimer {
  font-size: 120%;
  margin-top: max(1vw, 1vh);
}

.extras {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.extras-title {
  font-family: 'rama-gothic-c';
  font-weight: bold;
  font-size: max(2.8vw, 2.8vh);
  text-transform: uppercase;
  margin-block: min(6vh, 6vw);
}

.extras-cards-wrapper {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  justify-content: space-between;
  align-items: flex-start;
}

.extra-card {
  --_margin: min(2vw, 2vh);
  width: calc(25% - var(--_margin));
  height: 100%;
}

.extra-img-wrapper {
  position: relative;
  width: 100%;
  height: max(10vh, 10vw);
  background-color: var(--black);
  border-radius: min(1vh, 1vw);
  overflow: hidden;
  display: block;
}

.media-placeholder,
.extra-img {
  width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
}

.extra-img {
  height: 100%;
}

.extra-title {
  font-family: 'rama-gothic-c';
  font-weight: bold;
  font-size: min(4.2vh, 4.2vw);
  text-transform: uppercase;
  text-align: center;
  margin-block: min(1vw, 1vh);
}

.extra-description {
  font-size: 150%;
  text-align: center;
}

@media (pointer: coarse) {
  .reservations-title {
    font-size: min(5.5rem, 5.5vh);
    margin-block: min(8rem, 8vh) min(4vh, 4rem);
  }

  .reservations {
    width: 100%;
    padding-inline: 5%;
    margin: 0;
    margin-bottom: 6em;
  }
  
  .reservations-title {
    margin-block: min(8rem, 8vh) min(1vh, 1rem);
  }
  
  .formulas-choice {
    font-size: min(4rem, 4vh);
  }
  
  .formulas-section {
    align-items: center;
  }

  @media (orientation: portrait) {
    .formulas-wrapper {
      display: flex;
      flex-direction: column;
    }
    
    .formula-card-header {
      min-height: auto;
    }
    
    .formulas-btn {
      padding: 3%;
      font-size: min(3.7rem, 3.7vh);
    }
    
    .formula-price {
      font-size: 140%;
    }
  }
  
  @media (orientation: landscape) {
    .reservations-title {
      font-size: min(5.5rem, 5.5vw);
      margin-block: min(8rem, 8vw) min(4rem, 4vw);
    }
    
    .reservations {
      padding-inline: 2.5%;
    }
    
    .reservations-title {
      margin-block: min(8rem, 8vw) min(1rem, 1vw);
    }
    
    .formulas-choice {
      font-size: min(4rem, 4vw);
    }
    
    .formula-card-header {
      min-height: 12em;
    }
    
    .formula-title {
      font-size: 3.4em;
    }

    .formula-subtitle {
      font-size: 1em;
    }

    .formula-price {
      font-size: 1.4em;
    }
    
    .formula-description {
      font-size: 0.8em;
    }
    
    .formulas-btn {
      padding: 1%;
      font-size: 3.2em;
    }
  }
}