#banner-container-sports {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 0;
    overflow: hidden;
    transition: opacity 0.1s ease;
    will-change: opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.banner-content-sport-card {
    text-align: start;
    position: absolute;
    top: 16vh !important;
    left: 8vw;
    right: 5vw;
    max-width: 50vw;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.banner-metadata-sports {
    display: flex;
    align-items: center;
    margin-bottom: 1vw;
}

.banner-metadata-sports span {
    color: var(--color-font-primary);
    font-size: var(--font-metadata);
    font-weight: 800;
    text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.8);
    margin-right: 1vw;
}


.splide__pagination_sports .splide__pagination {
    height: 10vh;
    overflow: hidden;
    transition: height 0.2s ease;
    will-change: height;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.swiper-wrapper.category-sports {
    margin-left: -31vw;
    margin-top: 3vh
}

.banner-content-sports {
    display: flex;
    flex-direction: column;
    max-width: 60vw;
    align-items: flex-start;
    justify-content: flex-start;
    padding-left: 8vw;
    padding-top: 22vh;
    text-align: left;
    position: relative;
    z-index: 1;
    opacity: 1;
    visibility: visible;
    transition: padding-top 0.2s cubic-bezier(0.4, 0, 0.4, 1), opacity 0.2s ease;
    will-change: padding-top, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.banner-content-sports.hidden {
    opacity: 0;
    visibility: hidden;
}

.banner-content-sports .banner-title {
    font-size: var(--font-title) !important;
    margin-bottom: 1vh !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
    line-clamp: 1 !important;
    overflow: hidden !important;
}

#banner-container-sports.expand .more-info-sports-btn {
    height: 3vw;
    transition: height 0.22s cubic-bezier(0.4, 0, 0.4, 1), opacity 0.22s ease;
    will-change: height, opacity;
}

#banner-container-sports.expand .splide__pagination_sports .splide__pagination {
    height: 52vh;
}

#banner-container-sports.expand .banner-content-sports {
    padding-top: 12vh;
}

.banner-content-sports .banner-description {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-height: calc(1.4em * 3) !important;
}

.banner-description-sports {
    font-size: var(--font-description) !important;
    font-weight: 500;
    color: var(--color-font-primary);
    margin-bottom: 2vh;
    max-width: 60vw !important;
    text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.8);
    line-height: 1.4 !important;
    opacity: 0.8 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-wrap: break-word !important;
}

.metadata-channel {
    margin-right: 1vw;
}

.banner-title-sports {
    font-size: var(--font-title) !important;
    font-weight: 800;
    color: var(--color-font-primary);
    margin-bottom: 1vh;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    line-height: 1.2;

}

.banner-subtitle-sports {
    font-size: var(--font-subtitle) !important;
    font-weight: 500;
    color: var(--color-font-primary);
    margin-bottom: 2vh;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    line-height: 1.2;
}

.button-banner-sports {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 6vh;
    width: 12vw;
    padding: 0 1vw;
    text-align: left;
}

.button-banner-sports .iconInfo {
  display: inline-block;
  flex-shrink: 0;
  width: 3vh;
  height: 3vh;
  border: none;
  cursor: pointer;
  margin-right: 1vh;
  background-color: var(--color-font-primary);
  -webkit-mask: url('../../assets/images/icoInfo.svg') no-repeat center / contain;
  mask: url('../../assets/images/icoInfo.svg') no-repeat center / contain;
}

.more-info-sports-btn {
    background: rgba(55, 55, 55, .8);
    /* box-shadow: inset 0 0 0 2px var(--color-font-primary); */
    text-transform: none !important;
    font-size: 2vh !important;
    border-radius: var(--more-info-sport-btn-radius) !important;
    height: 6vh;
    border: transparent !important;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.4, 1),
            opacity 0.2s cubic-bezier(0.4, 0, 0.4, 1);
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.more-info-sports-btn.focused,
.more-info-sports-btn:hover,
.more-info-sports-btn:focus {
    background: linear-gradient(90deg, var(--color-app-primary), var(--color-app-secondary));
    color: var(--color-font-selected) !important;
    box-shadow: none !important;
    transform: scale(1.05); 
    transition: transform 0.2s ease !important;
    /* border: 2px solid var(--color-app-primary) !important; */
}

.banner-title-sports-cards {
    font-size: var(--font-title) !important;
    font-weight: 800;
    color: var(--color-font-primary);
    margin-bottom: 1vh;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    line-height: 1.2;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
    line-clamp: 1!important;
    overflow: hidden !important;
}

.banner-subtitle-sports-cards {
    font-size: var(--font-subtitle) !important;
    font-weight: 500;
    color: var(--color-font-primary);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    line-height: 1.2;
    margin-bottom: 2vh;
}

.button-banner-sports-cards {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 6vh;
    width: 14vw;
    padding: 0 1vw;
    text-align: left;
}

.banner-metadata-sports-cards {
    display: flex;
    align-items: center;
    margin-bottom: 1vh;
}

.banner-metadata-sports-cards span {
    font-size: 1.8vh;
    font-weight: 500;
    color: var(--color-font-primary);
    text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.8);
}

.banner-description-sports-cards {
    font-size: var(--font-description) !important;
    font-weight: 500;
    color: var(--color-font-primary);
    margin-bottom: 2vh;
    max-width: 60vw !important;
    text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.8);
    line-height: 1.4 !important;
    opacity: 0.8 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-wrap: break-word !important;
}

@media (max-width: 1000px) {

    .splide__pagination_sports .splide__pagination {
        height: 20vh;
    }

    #banner-container-sports.expand .splide__pagination_sports .splide__pagination {
        height: 46vh;
    }

    .banner-content-sports h2 {
        font-size: 4vh !important;
    }

    .more-info-sports-btn:focus {
        border: none !important;
        box-shadow: inset 0 0 0 2px var(--color-font-secondary) !important;
    }
}