.genre-list-container {
    background: linear-gradient(0deg, rgba(18, 18, 18, 0.70) 0%, rgba(18, 18, 18, 0.70) 100%), url(/Content/images/backgrounds/Cignal-PLDT.png) center / cover no-repeat;
    width: 100%;
}

.genre-header {
    display: flex;
    flex-direction: column;
    padding-bottom: 42px;
    gap: 42px;
}

.genre-header-text {
    color: var(--clr-text-white);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
    padding: 64px 64px 0 64px;
}

.genre-header-title {
    font-family: var(--font-family-head);
    font-size: var(--font-size-head-03);
    font-weight: 800;
    line-height: normal;
    font-style: normal;
}

.genre-header-subtitle {
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-03);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

/*.genre-header-tabs {
    display: flex;
    align-items: center;
    gap: 24px;
    align-self: stretch;
}*/

.genre-header-tabs {
    height: auto;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

    .genre-header-tabs.comparison {
        padding: 0 0 48px 0;
    }

    .genre-header-tabs::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Edge */
    }

.genre-header-tabs-contents {
    height: auto;
    width: max-content;
    display: flex;
    flex-direction: row;
    gap: 16px;
    padding: 0 64px;
}


.genre-header-tabs .btn-secondary {
    flex-shrink: 0;
    white-space: nowrap;
    min-width: max-content;
}




.genre-contents-section {
    width: 100%;
    padding: 0px 64px 64px 64px;
}


.genre-contents-container {
    display: flex;
    padding: 42px 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 42px;
    align-self: stretch;
    border-radius: 20px;
    background: #FFF;
    box-shadow: 0 4px 8px 0 rgba(60, 60, 60, 0.10);
}



.genre-contents-guide {
    display: flex;
    padding: 0 40px;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.genre-contents-heading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
    flex: 1 0 0;
}

    .genre-contents-heading > h2 {
        color: var(--clr-text-neutral-head-500);
        font-size: var(--font-size-head-05);
        font-style: normal;
        font-weight: 800;
        line-height: normal;
    }

    .genre-contents-heading > p {
        color: var(--clr-text-neutral-500);
        font-family: var(--font-family-body);
        font-size: var(--font-size-body-02);
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

.genre-featured-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    flex: 1 0 0;
}

.genre-featured-sub-container {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    flex: 1 0 0;
}

    .genre-featured-sub-container > img {
        flex: 1 0 0;
        border-radius: 6px;
        width: 302px;
        max-width: 302px;
        height: auto;
    }


.genre-shows-header {
    display: flex;
    padding: 0 40px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
}

    .genre-shows-header > h2 {
        color: var(--clr-text-neutral-500);
        font-family: var(--font-family-head);
        font-size: 1.5rem;
        font-style: normal;
        font-weight: 800;
        line-height: normal;
    }

    .genre-shows-header > p {
        color: #000;
        font-family: var(--font-family-body);
        font-size: 1.25rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

.genre-movies-list-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.genre-movies-container {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 0 40px;
    width: 100%;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    scroll-behavior: smooth;
}

.browse-channels-section .genre-movies-container {
    padding: 0 64px;
}

.browse-channels-section .genre-movies-list-container > h2 {
    padding: 0 64px;
}



.genre-movies-list-container > h2 {
    color: var(--clr-text-neutral-700);
    font-family: var(--font-family-head);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    padding: 0 40px;
}

.genre-movies-list-container--browse-channel > h2 {
    padding: 0 64px;
}

.genre-movies-box {
    display: flex;
    width: 150px;
    height: 150px;
    padding: 12px;
    flex-shrink: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    cursor: pointer;
    box-sizing: border-box;
    background: #FFF;
}

    .genre-movies-box::before {
        content: "";
        position: absolute;
        inset: 0;
        padding: 1px;
        background: linear-gradient(90deg, #FC9D81 0%, #D50656 100%);
        border-radius: 12px;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        z-index: -2;
    }


.genre-movies-icon {
    display: flex;
    width: 80px;
    height: 80px;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    aspect-ratio: 1/1;
}

    .genre-movies-icon > img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.genre-movies-box-footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 7px;
    color: var(--clr-text-neutral-600);
    font-family: var( --font-family-body);
    font-size: var(--font-size-body-05);
    text-align: center;
}

    .genre-movies-box-footer > h4 {
        font-weight: 800;
    }

    .genre-movies-box-footer > p {
        font-weight: 400;
    }





@media (max-width: 992px) {
    .genre-header {
        padding-bottom: 32px;
        gap: 32px;
    }

    .genre-contents-section {
        padding: 0px 16px 32px 16px;
    }


    .genre-header-text {
        align-items: center;
        padding: 32px 32px 0 32px;
        text-align: center;
    }

    .genre-header-title {
        font-size: var(--font-size-head-05);
    }

    .genre-header-subtitle {
        font-size: var(--font-size-body-04);
    }


    .genre-contents-container {
        padding-top: 16px;
        padding-bottom: 16px;
        gap: 24px;
    }

        .genre-contents-container.contents {
            padding-top: 32px;
            padding-bottom: 32px;
        }

    .genre-header-tabs-contents {
        padding: 0 16px;
    }

    .genre-contents-guide {
        flex-direction: column;
        padding: 0 16px;
    }

    .genre-shows-header {
        padding: 0 16px;
    }

    .genre-movies-list-container > h2 {
        padding: 0 16px;
        font-size: var(--font-size-head-07);
    }

    .browse-channels-section .genre-movies-container {
        padding: 0 16px;
    }

    .browse-channels-section .genre-movies-list-container > h2 {
        padding: 0 16px;
    }

    .genre-movies-container {
        padding: 0 16px;
        gap: 12px;
    }

    .hero-article-swimlane-content.contents > .hero-article-swimlane-cards-container {
        gap: 12px;
    }

    .genre-contents-heading > p {
        font-size: var(--font-size-body-04);
    }

    .genre-shows-header > h2 {
        font-size: var(--font-size-head-07);
    }

    .genre-shows-header > p {
        font-size: var(--font-size-body-04);
    }


    .genre-movies-box {
        width: 100px;
        height: 100px;
    }

    .genre-movies-icon {
        width: 40px;
        height: 40px;
    }


    .genre-movies-box-footer {
        font-size: var(--font-size-body-06);
        gap: 4px;
    }

}