main {
   width: 100%;
}

/* MAIN > CHARACTER */
.character {
   height: fit-content ;
   width: 80%;;
   margin: 7vh auto;
}
.information-about-character {
   display: flex;
   flex-direction: row;
   gap: 5vw;
   height: 100%;
   width: 100%;
}
.information-about-character .portrait {
   width: 40%;
   justify-self: center;
   align-self: center;
}
.information-about-character .portrait img {
   width: 100%;
   border: solid #000 0.6vw;
}
.general-info {
   align-self: center;
   font-size: 2.3vw;
}
ol {
   list-style: none;
}

/* GALLERY */
.gallery {
   display: flex;
   width: 100%;
   height: fit-content;
   background: url(../images/draculaura_images/background.jpg);
   font-size: 1.1em;
   color: #fff;
   text-align: center;
}
.gallery-inner {
   display: flex;
   justify-content: center;
   width: 80%;
   margin: 0 auto;
   height: 800px;
}
.gallery-inner .line-before {
   background-image: url(../images/line-character.png);
   height: 36px;
   position: absolute;
   width: 100%;
}
.gallery h1 {
   padding-top: 10vh;
   text-transform: uppercase;
}

/* CAROUSEL */
.carousel {
   max-width: 1100px;
   width: 90%;
   position: absolute;
   align-self: flex-end;
   padding-bottom: 10vh;
   text-align: center;
}
.carousel .arrow {
   top: 50%;
   height: 80px;
   cursor: pointer;
   position: absolute; 
   transform: translateY(-50%);
   transition: transform 0.1s linear;
}
.carousel .arrow:active {
   transform: translateY(-50%) scale(0.8);
}
.carousel .arrow:first-child {
   left: -70px;
}
.carousel .arrow:last-child {
   right: -50px;
}
.carousel .carousel-inner {
   display: grid;
   grid-auto-flow: column;
   grid-auto-columns: calc((100% / 3) - 12px);
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   gap: 16px;
   scroll-behavior: smooth;
   scrollbar-width: none;
}
.carousel-inner::-webkit-scrollbar {
   display: none;
}
.carousel-inner :where(.card, .gallery-image) {
   display: flex;
   justify-content: center;
   align-items: center;
}
.carousel-inner .card {
   scroll-snap-align: start;
   height: 500px;
   list-style: none;
   background: #fff;
   cursor: pointer;
   flex-direction: column;
   border: solid #000 0.5vw;
   filter: grayscale(1);
}
.carousel-inner .card .gallery-image {
   width: 100%;
   height: 100%;
}
.card .gallery-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}
.card:hover {
   cursor: pointer;
   filter: grayscale(0);
   transform: translateY(-10px);
}

/* MEDIA */
@media (max-width: 992px) {
   /* GALLERY */
   .gallery {
      font-size: 1em;
   }
   .gallery-inner {
      height: 750px;
   }
   .gallery h1 {
      padding-top: 4vh;
   }
   
   /* CAROUSEL */
   .carousel {
      max-width: 600px;
   }
   .carousel .carousel-inner {
      grid-auto-columns: calc((100% / 2) - 9px);
   }
   .carousel-inner .card {
      border: solid #000 0.8vw;
   }
}
@media (max-width: 768px) {
   /* GALLERY */
   .gallery {
      font-size: 0.85em;
   }

   /* CAROUSEL */
   .carousel {
      max-width: 400px;
   }
   .carousel .carousel-inner {
      grid-auto-columns: 100%;
   }
   .carousel-inner .card {
      border: solid #000 1vw;
   }
}
@media (max-width: 576px) {
   /* MAIN > CHARACTER */
   .information-about-character {
      display: flex;
      flex-direction: column;
      gap: 2vh;
   }
   .information-about-character .portrait {
      width: 95%;
   }
   .information-about-character .portrait img {
      border: solid #000 1.5vw;
   }
   .general-info {
      font-size: 4.2vw;
   }

   /* GALLERY */
   .gallery {
      font-size: 0.8em;
   }
   .gallery-inner {
      height: 700px;
   }
   .gallery h1 {
      padding-top: 6vh;
   }

   /* CAROUSEL */
   .carousel {
      max-width: 300px;
   }
}