/* ******************************** */
/*         CAROUSEL STYLING         */
/* ******************************** */
.splide__arrow svg {
   display: none;
}
.content-carousel {
   position: relative;
}
.content-carousel header {
   display: flex;
   justify-content: space-between;
   gap: 1rem;
   align-items: center;
   padding-bottom: 1rem;
}
.content-carousel #carousel-heading {
   font-weight: 600;
   font-size: var(--text-lg);
}
.content-carousel .view-all-link {
   flex-shrink: 0;
   text-decoration: none;
   color: var(--base-content);
}
.content-carousel .view-all-link:hover {
   color: var(--primary);
}
.content-carousel .view-all-link i {
   margin-left: .25rem;
}
.content-carousel .splide__arrow--prev {
   left: 0;
}
.content-carousel .splide__arrow--next {
   right: 0;
}
.content-carousel:hover .splide__arrow {
   opacity: 1;
   visibility: visible;
}
.content-carousel .splide__arrow {
   position: absolute;
   z-index: 1;
   transform: translateY(-1.25rem);
   display: flex;
   justify-content: center;
   align-items: center;
   height: 4.5rem;
   width: 1.5rem;
   border-radius: .25rem;
   border: none;
   background-color: rgba(235, 235, 246, 0.50);
   color: var(--dark-content);
   opacity: 0;
   transition: var(--three);
}
.content-carousel:hover .splide__arrow {
   background-color: rgba(235, 235, 246, 0.70);
}
.content-carousel .splide__arrow:hover {
   background-color: rgba(235, 235, 246, 0.90);
}
.content-carousel .splide__arrow i {
   color: var(--base-mute);
}
.content-carousel .splide__track {
   transition: var(--three);
   overflow: visible;
}
.content-carousel .splide__track::after {
    position: absolute;
    content: "";
    height: 100%;
    width: 5rem;
    background: rgb(244 244 247 / 66%);
    z-index: 1;
    right: -4.75rem;
    top: 0;
}
.content-carousel .splide__pagination {
   justify-content: end;
   gap: .25rem;
}
.content-carousel .splide__pagination__page.is-active {
   background-color: var(--primary);
   width: 1.5rem
}
.content-carousel .splide__pagination__page {
   height: .25rem;
   width: .5rem;
   border-radius: .125rem;
   border: none;
   background-color: rgba(34, 38, 59, 0.5);
   transition: var(--five);
}
.horizontal-full {
   padding: .75rem;
}
/* ******************************** */
/*            MEDIA STYLING         */
/* ******************************** */
.media-container, .person-container {
   position: relative;
}
.media-container a, .person-container a  {
   text-decoration: none;
}
.media-container .thumb-img-container {
   position: relative;
   overflow: hidden;
   aspect-ratio: 16 / 9;
   border-radius: .5rem;
   margin-bottom: .5rem;
   line-height: 1.3;
}
.person-container .thumb-img-container {
   position: relative;
   overflow: hidden;
   aspect-ratio: 1 / 1;
   border-radius: 100%;
   margin-bottom: .5rem;
   line-height: 1.3;
   border: 2px solid var(--base-05);
}
.person-container .thumb-img-container .thumb-img {
   object-fit: cover;
   height: 100%;
   width: 100%;
}
.media-container:hover .thumb-img-overlay,
.person-container:hover .thumb-img-overlay {
   visibility: visible;
   opacity: 1;
}
.media-container .thumb-img-overlay,
.person-container .thumb-img-overlay {
   visibility: hidden;
   opacity: 0;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   display: flex;
   align-items: end;
   padding: .5rem;
   background: rgb(34,38,72);
   background: -moz-linear-gradient(180deg, rgba(34,38,72,0) 0%, rgba(34,38,72,0.5) 80%);
   background: -webkit-linear-gradient(180deg, rgba(34,38,72,0) 0%, rgba(34,38,72,0.5) 80%);
   background: linear-gradient(180deg, rgba(34,38,72,0) 0%, rgba(34,38,72,0.5) 80%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#222648",endColorstr="#222648",GradientType=1);
   transition: var(--three);
}
.person-container .thumb-img-overlay {
   justify-content: center;
}
.media-container .thumb-img-overlay button,
.person-container .thumb-img-overlay button {
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 1;
   width: 2.5rem;
   height: 2.5rem;
   border: none;
   border-radius: 100%;
   color: var(--primary);
   position: relative;
   background-color: var(--base-01);
   transition: var(--three);
}
.media-container .thumb-img-overlay .favorite-btn i::before,
.person-container .thumb-img-overlay .favorite-btn i::before {
   transition: var(--three);
}
.media-container .thumb-img-overlay .favorite-btn.active i::before,
.person-container .thumb-img-overlay .favorite-btn.active i::before {
   font-weight: 900;
   transition: var(--three);
}
.media-container .thumb-img-overlay .favorite-btn.active,
.person-container .thumb-img-overlay .favorite-btn.active {
   animation: pop 0.3s ease;
   background-color: var(--base-02);
}
@keyframes pop {
   0% {
       transform: scale(1); /* Start at original size */
   }
   50% {
       transform: scale(1.1); /* Scale up to 110% */
   }
   100% {
       transform: scale(1); /* Scale back to original size */
   }
}
.media-container .progress-indicator-container,
.person-container .progress-indicator-container {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: .2rem;
   background-color: rgba(34, 38, 59, 0.5);
}
.media-container .progress-indicator ,
.person-container .progress-indicator {
   background-color: var(--primary);
   height: 100%;
}
.media-container p,
.person-container p {
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
   font-size: var(--text-xs);
   color: var(--base-mute);
   line-height: 1.3;
   margin-bottom: .25rem;
}
.media-container h3,
.person-container h3 {
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   font-size: var(--text-sm);
   font-weight: 600;
   line-height: 1.3;
}

@media only screen and (min-width: 360px) {
   /* ******************************** */
   /*         CAROUSEL STYLING         */
   /* ******************************** */
   .content-carousel .splide__arrow--next {
      right: -.75rem;
   }
   /* ******************************** */
   /*            MEDIA STYLING         */
   /* ******************************** */
}

@media only screen and (min-width: 500px) {
   /* ******************************** */
   /*         CAROUSEL STYLING         */
   /* ******************************** */

   /* ******************************** */
   /*            MEDIA STYLING         */
   /* ******************************** */
}

@media only screen and (min-width: 640px) {
   /* ******************************** */
   /*         CAROUSEL STYLING         */
   /* ******************************** */
   .content-carousel .splide__arrow--next {
      right: -1.5rem;
   }
   .horizontal-full {
      padding: 1.25rem 1.25rem;
   }
.content-carousel .splide__track::after {
    right: -5.25rem;
}
   /* ******************************** */
   /*            MEDIA STYLING         */
   /* ******************************** */
}

@media only screen and (min-width: 768px) {
   /* ******************************** */
   /*         CAROUSEL STYLING         */
   /* ******************************** */

   /* ******************************** */
   /*            MEDIA STYLING         */
   /* ******************************** */
}

@media only screen and (min-width: 1024px) {
   /* ******************************** */
   /*         CAROUSEL STYLING         */
   /* ******************************** */
   .horizontal-full {
      padding: 1.5rem 2.5rem;
   }
   /* ******************************** */
   /*            MEDIA STYLING         */
   /* ******************************** */
}

@media only screen and (min-width: 1280px) {
   /* ******************************** */
   /*         CAROUSEL STYLING         */
   /* ******************************** */
   .content-carousel #carousel-heading {
      font-size: var(--text-xl);
   }

   /* ******************************** */
   /*            MEDIA STYLING         */
   /* ******************************** */
   .media-container h3,
   .person-container h3 {
      font-size: var(--text-base);
   }
}

@media only screen and (min-width: 1536px) {
   /* ******************************** */
   /*         CAROUSEL STYLING         */
   /* ******************************** */

   /* ******************************** */
   /*            MEDIA STYLING         */
   /* ******************************** */
}

.progress_hide_0 {
  display:none;
}