#spa-page {
   background-image: url('/cprg-218-final-project/assets/spa-hero-banner.jpg');
}

h2 {
   margin-bottom: 5rem;
   text-align: center;
}

h3,
.spa-list-wrapper .pricing {
   font-size: calc(24px + (32 - 24) * ((100vw - 320px) / 1600));
}

.spa-list-wrapper .pricing {
   font-family: 'PP Editorial Old', sans-serif;
   font-weight: 200;
}

.spa-list-wrapper {
   max-width: 80%;
   margin: 0 auto;
}

.spa-list {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 3rem 2rem;
   border-bottom: 1px solid var(--font);
}

.spa-title {
   display: flex;
   align-items: flex-end;
   gap: 0.5rem 1rem;
}

.spa-title p {
   margin: 0;
   font-style: italic;
}

.spa-list-content {
   padding-right: 2rem;
}

.spa-list-content p {
   margin-bottom: 0;
}

/* mini-box */
.mini-boxes {
   --column-count: 3;
   --gap-x: 3rem;
   --gap-x-sum: (var(--gap-x) * (var(--column-count) - 1));
   --item-width: calc((100% - var(--gap-x-sum)) / var(--column-count));
   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
   gap: 3rem;
}

.mini-box {
   width: var(--item-width);
   background-color: var(--light-tan);
   padding: 2rem;
   max-width: 400px;
}

.mini-box h3 {
   margin-bottom: 1.6rem;
}

.mini-box-content {
   display: flex;
   justify-content: space-between;
}

.mini-box-content.row {
   flex-flow: column wrap;
}

.mini-box-content p {
   font-size: 1.05rem;
   margin-bottom: 0;
}

.mini-box-content span {
   display: block;
   font-size: 0.8rem;
   font-style: italic;
   color: rgba(35, 31, 32, 0.80);
}

#spa-info {
   position: relative;
   background-image: url('/cprg-218-final-project/assets/heropage.jpg');
}

#spa-info .container {
   position: relative;
   color: var(--light-tan);
   z-index: 1;
}

#spa-info h2 {
   color: var(--light-tan);
   margin-bottom: 3rem;
   text-align: left;
}

#spa-info ul {
   list-style: none;
   padding-left: 0;
}

#spa-info ul li {
   position: relative;
   padding: 2rem 2rem;
   border-bottom: 1px solid rgba(240, 239, 227, 0.80);
   text-transform: uppercase;
}

#spa-info ul li::before {
   content: '';
   position: absolute;
   top: 50%;
   left: 10px;
   height: 0.6rem;
   width: 0.6rem;
   border-radius: 50%;
   background-color: var(--light-tan);
   transform: translateY(-50%);
}


footer {
   border-top: 0.5px solid rgba(35, 31, 32, 0.40);
}

@media screen and (max-width: 1024px) {
   h2 {margin-bottom: 2.5rem;}

   .spa-list-wrapper {
      max-width: 100%;
   }

   .spa-list {
      align-items: flex-start;
   }

   .spa-title {
      flex-direction: column;
      align-items: flex-start;
   }

   .mini-boxes {
      --column-count: 2;
   }
}


@media screen and (max-width: 768px) {
   .mini-boxes {
      --column-count: 1;
      justify-content: center;
   }
}

@media screen and (max-width: 480px) {
   h2 {
      margin-bottom: 1.2rem;
   }
   .spa-list {
      flex-direction: column;
      padding: 1.5rem 1rem;
      gap: 1rem;
   }

   .spa-list-content {
      padding-right: 0;
   }

   .spa-list-wrapper .pricing {
      font-family: inherit;
      font-size: inherit;
      font-weight: inherit;
      color: inherit;
   }
}


/* ANIMATIONS */
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {

   .page-hero-banner.animated .hero-title {
      animation: 1s cubic-bezier(0.83, 0, 0.17, 1) fade-in-ttb both;
   }

   .page-hero-banner.animated p {
      animation: 1s cubic-bezier(0.83, 0, 0.17, 1) fade-in both;
      animation-delay: 0.3s;
   }

   h2.animated {
      animation: 1s cubic-bezier(0.83, 0, 0.17, 1) fade-in both;
   }

   .spa-list.animated {
      animation: 0.4s ease-in fade-in-btt var(--delay) both;
   }

   .mini-boxes.animated .mini-box {
      animation: 1s cubic-bezier(0.83, 0, 0.17, 1) fade-in-ttb var(--delay) both;
   }

   h2.animated {
      animation: 1s cubic-bezier(0.83, 0, 0.17, 1) fade-in both;
   }

   #spa-info ul.animated li {
      animation: 0.8s cubic-bezier(0.83, 0, 0.17, 1) fade-in-ltr var(--delay) both;
   }
}