.head-project {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 100dvh;
}

.head-project h1,
.head-project p {
  text-align: center;
}

.opening {
  padding: 0;
}

.opening video,
.opening img {
  width: 100%;
  height: auto;
  border-radius: 0;
}

.opening .youtube {
  width: 100%;
  min-height: 100dvh;
  aspect-ratio: 16 / 9;
  border-style: none;
  border-radius: 0;
}

.prelude {
  padding: clamp(40px, 5vw, 80px) clamp(30px, 24vw, 400px);
  display: flex;
  gap: clamp(40px, 9vw, 140px);
}

.prelude-category,
.prelude-story {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 20px);
  width: 50%;
}



.container {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2vw, 30px);
}

.container h2 {
  text-wrap: pretty;
}

.section-heading {
  padding: clamp(20px, 2vw, 40px) 0px 0px 0px;
}



.tag {
  background-color: black;
  color: white;
  border-style: none;
  border-radius: 50px;
  min-width: max-content;
  max-width: max-content;
  padding: 4px 12px 6px;
}

.carousel {
  display: flex;
  gap: clamp(20px, 2vw, 30px);
  height: clamp(320px, 40vw, 540px);
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  padding: 18px clamp(30px, 18vw, 300px) clamp(24px, 5vw, 30px);
  cursor: default;
  user-select: none;
}

.carousel::-webkit-scrollbar {
  display: none;
}

.carousel img {
  height: 100%;
  position: relative;
  -webkit-user-drag: none;
}

.media-carousel {
  display: flex;
  gap: clamp(20px, 2vw, 30px);
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  padding: 10px clamp(30px, 18vw, 300px) 0px;
  cursor: grab;
  user-select: none;
}

.media-carousel:active {
  cursor: grabbing;
}

.media-carousel::-webkit-scrollbar {
  display: none;
}

.media-carousel img {
  width: clamp(240px, 24vw, 380px);
  position: relative;
  -webkit-user-drag: none;
}

.media-link {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.media-link p {
  width: clamp(240px, 24vw, 380px);
}

.container img:hover,
.container video:hover,
.container iframe:hover,
.carousel img:hover,
.media-carousel img:hover,
.media-link:has(p:hover) img {
  transform: scale(1.03);
  transition: transform 0.4s ease-in-out;
  box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.1);
}



.two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2vw, 30px);
  align-items: center;
  height: 100%;
}

.two-column img {
  width: 100%;
  height: 100%;
}

.two-row {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: clamp(20px, 2vw, 30px);
  align-items: center;
  height: 100%;
}



@media (min-width: 1921px) and (max-width: 2560px) {
  .prelude {
    padding: clamp(40px, 5vw, 80px) clamp(550px, 18vw, 700px);
    gap: clamp(100px, 9vw, 170px);
  }

  .prelude-category {
    gap: clamp(20px, 2vw, 26px);
  }

  .tag {
    padding: 4px 18px 6px;
  }

  .carousel {
    padding: 18px clamp(550px, 18vw, 700px) clamp(24px, 5vw, 30px);
    height: clamp(800px, 40vw, 900px);
  }

  .media-carousel {
    padding: 10px clamp(550px, 18vw, 700px) 0px;
  }

  .media-carousel img, .media-link p {
    width: clamp(640px, 24vw, 720px);
  }

  .container,
  .carousel,
  .media-carousel,
  .two-column,
  .two-row {
    gap: clamp(36px, 2vw, 44px);
  }
}

@media (max-width: 1728px) {
  .prelude {
    gap: clamp(40px, 9vw, 100px);
  }
}

@media (max-width: 1512px) {
  .prelude {
    padding: clamp(40px, 5vw, 80px) clamp(30px, 18vw, 300px);
    gap: clamp(30px, 10vw, 160px);
  }
}

@media (max-width: 1440px) {
  .prelude {
    padding: clamp(40px, 5vw, 80px) clamp(30px, 18vw, 300px);
    gap: clamp(30px, 10vw, 100px);
  }
}

@media (max-width: 1280px) {
  .prelude {
    padding: clamp(40px, 5vw, 80px) clamp(30px, 18vw, 200px);
    gap: clamp(30px, 10vw, 50px);
  }

  .carousel {
    padding: 18px clamp(30px, 18vw, 200px) clamp(24px, 5vw, 30px);
  }

  .media-carousel {
    padding: 10px clamp(30px, 18vw, 200px) 0px;
  }
}

@media (max-width: 1024px) {
  .head-project {
    min-height: 50dvh;
  }

  .opening .youtube {
    min-height: 40dvh;
  }

  .prelude {
    flex-direction: column;
  }

  .prelude-category,
  .prelude-story {
    width: 100%;
  }
}

@media (max-width: 820px) {
  .opening .youtube {
    height: 40dvh;
  }

  .two-column {
    display: flex;
    flex-direction: column;
  }

  .two-row {
    display: flex;
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  .head-project {
    min-height: 58dvh;
  }

  .prelude {
    padding: clamp(40px, 5vw, 80px) clamp(30px, 18vw, 80px);
    gap: clamp(30px, 10vw, 50px);
  }

  .carousel {
    padding: 18px clamp(30px, 18vw, 80px) clamp(24px, 5vw, 30px);
  }

  .media-carousel {
    padding: 10px clamp(30px, 18vw, 80px) 0px;
  }
}

@media (max-width: 500px) {
  .head-project {
    padding: clamp(60px, 4vw, 80px) clamp(30px, 18vw, 40px) 0px;
  }

  .opening .youtube {
    height: fit-content;
  }

  .prelude {
    padding: clamp(40px, 5vw, 80px) clamp(30px, 18vw, 40px);
    gap: clamp(30px, 10vw, 50px);
  }

  .carousel {
    padding: 18px clamp(30px, 18vw, 40px) clamp(24px, 5vw, 30px);
    cursor: grab;
  }

  .carousel:active {
    cursor: grabbing;
  }

  .media-carousel {
    flex-direction: column;
    padding: 10px clamp(30px, 18vw, 40px) 0px;
  }

  .media-carousel img,
  .media-link p {
    width: 100%;
  }

  .container img:hover,
  .container video:hover,
  .container iframe:hover,
  .carousel img:hover,
  .media-carousel img:hover,
  .media-link:has(p:hover) img {
    transform: none;
    transition: none;
    box-shadow: none;
  }
}