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

/* SIDE BY SIDE PANEL */
.panel:not(:last-of-type) {
   border-bottom: 1px solid var(--font);
}

.panel-side {
   display: flex;
   justify-content: space-between;
   gap: 8rem;
}

.panel-img {
   position: relative;
   width: calc(60% - 4rem);
   width: 100%;
   height: 40rem;
   max-width: 600px;
   background-size: cover;
   background-position: center;
}

.panel-content {
   width: calc(40% - 4rem);
}

.panel-content h2 {max-width: 75%;}

.panel-content p {
   max-width: 65%;
}

.panel-content ul {
   list-style: none;
   padding-left: 0;
   margin-top: 5rem;
}

.panel-content li {
   display: flex;
   gap: 1rem;
   margin-bottom: 1.2rem;
}

.panel-content img {
   max-width: 1.5rem;
   object-fit: contain;
}

.panel-side.room-1 .panel-img {
   background-image: url('/cprg-218-final-project/assets/room-ocean-view.jpg');
}

.panel-side.room-2 .panel-img {
   background-image: url('/cprg-218-final-project/assets/room-beachfront.jpg');
}

.panel-side.room-3 .panel-img {
   background-image: url('/cprg-218-final-project/assets/room-garden.jpg');
}

.panel-side.room-4 .panel-img {
   background-image: url('/cprg-218-final-project/assets/room-ocean-premium.jpg');
}

.panel-side.room-5 .panel-img {
   background-image: url('/cprg-218-final-project/assets/room-accessible.jpg');
}

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

@media screen and (max-width: 1280px) {
   .panel-side {
      gap: 4rem;
   }

   .panel-img {
      width: calc(60% - 2rem);
      max-width: 600px;
   }

   .panel-content {
      width: calc(40% - 2rem);
   }
}

@media screen and (max-width: 1024px) {
   .panel-side {
      flex-direction: column;
   }

   .panel-img,
   .panel-content {
      width: 100%;
   }

   .panel-img {
      max-width: 100%;
      height: 20rem;
   }

   .panel-content {
      display: flex;
      gap: 2rem;
   }

   .panel-content h2 {
      max-width: 100%;
   }

   .panel-content ul {margin-top: 0;}

   .panel-content .panel-title,
   .panel-content ul {
      width: 50%;
   }

   .panel-side.room-1 .panel-img {
      background-image: url('/cprg-218-final-project/assets/room-ocean-view-mobile.jpg');
   }

   .panel-side.room-2 .panel-img {
      background-image: url('/cprg-218-final-project/assets/room-beachfront-mobile.jpg');
   }

   .panel-side.room-3 .panel-img {
      background-image: url('/cprg-218-final-project/assets/room-garden-mobile.jpg');
   }

   .panel-side.room-4 .panel-img {
      background-image: url('/cprg-218-final-project/assets/room-ocean-premium-mobile.jpg');
   }

   .panel-side.room-5 .panel-img {
      background-image: url('/cprg-218-final-project/assets/room-accessible-mobile.jpg');
   }

}

@media screen and (max-width: 768px) {
   .panel-content {
      display: block;
   }

   .panel-content .panel-title,
   .panel-content ul {
      width: 100%;
   }

   .panel-content ul {
      margin-top: 3rem;
   }
}

@media screen and (max-width: 480px) {
   .panel-content p {
      max-width: 100%;
   }
}

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

   .panel-side .panel-img::after {
      position: absolute;
      content: '';
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--light-color);
      transform-origin: right center;
   }

   .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;
   }

   .panel-side.animated .panel-img::after {
      animation: 1s cubic-bezier(0.83, 0, 0.17, 1) slide-out-x both;
   }

   .panel-side.animated .panel-content {
      animation: 0.5s cubic-bezier(0.83, 0, 0.17, 1) fade-in both;
      animation-delay: 0.3s;
   }
}