#product-details:has(#kyivstar-tv) {
    padding: 0;
}

#kyivstar-tv {
    font-family: "Montserrat", sans-serif;
    margin: 0 -15px;

    img {
        display: block;
        width: 100%;
        height: auto;
    }

    section {
        aspect-ratio: 16/9;
        background-repeat: no-repeat;
        background-size: cover;        
    }

    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin: 0;
        color: #fff;
        text-align: left;
    }

    ul,
    ol {
        padding-left: 0;
        margin: 0;
    }

    .container {
        padding: 0 min(10vw, 175px);
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .section-title {
        font-weight: 600;
        font-size: clamp(12px, 2.4vw, 42px);
    }

    .kyivstar-text {
        font-weight: 400;
        font-size: clamp(8px, 1.6vw, 32px);
        line-height: 150%;
        color: rgba(255, 255, 255, 0.8);
        text-align: left;
    }

    .kyivstar-list{
        list-style: none;

        .kyivstar-list-item {
            display: flex;
            gap: min(0.6vw, 12px);
            align-items: flex-start;            

            &:before {
                content: '';
                display: block;
                flex-shrink: 0;
                margin-top: min(0.5vw, 10px);
                width: clamp(12px, 1.4vw, 24px);
                height: clamp(12px, 1.4vw, 24px);
                background-image: url('/themes/kivi/assets/shop/ua/online-services/kyivstar-tv/img/kyivstar-star.svg');
                background-repeat: no-repeat;
                background-size: cover;
            }
        }
    }

    /* Sections */

    .kyivstar-hero {
        background-image: url('/themes/kivi/assets/shop/ua/online-services/kyivstar-tv/img/section-1.jpg');

        .logo-wrap {
            width: min(41vw, 720px);
            margin-bottom: min(18px, 1vw);
        }

        .section-title {
            margin-bottom: min(80px, 4vw);
        }

        .kyivstar-list {
            margin-bottom: min(38px, 2vw);

            .kyivstar-list-item:not(:last-child) {
                margin-bottom: min(0.5vw, 10px);;
            }

        }

        .img-wrap {
            width: min(26vw, 500px);
        }
    }

    .kyivstar-library {
        background-image: url('/themes/kivi/assets/shop/ua/online-services/kyivstar-tv/img/section-2.jpg');

        .section-title {
            margin-bottom: min(140px, 7.4vw);
        }

        .kyivstar-list-item:not(:last-child) {
            margin-bottom: min(1.5vw, 26px);
        }
    }

    .kyivstar-channels {
        background-image: url('/themes/kivi/assets/shop/ua/online-services/kyivstar-tv/img/section-3.jpg');

        .container {
            padding-top: min(6vw, 120px);
            justify-content: flex-start;

            .section-title {
                text-align: center;
            }
        }
    }

    .kyivstar-features {
        background-image: url('/themes/kivi/assets/shop/ua/online-services/kyivstar-tv/img/section-4.jpg');

        .section-title {
            text-align: center;
            margin-bottom: min(2vw);

            @media(min-width: 560px) {
                margin-bottom: min(120px, 6vw);                
            }
        }

        .features-list {
            display: flex;
            flex-direction: column;
            gap: min(0.7vw, 26px);

            @media(min-width: 560px) {
                flex-direction: row;
                flex-wrap: wrap;
                gap: min(1.5vw, 26px);
            }

            .features-item {
                flex: 1 1 calc(50% - 13px);

                .features-subtitle {
                    display: flex;
                    align-items: center;
                    gap: min(18px, 1vw);
                    font-size: clamp(10px, 2.4vw, 42px);
                    font-weight: 600;
                    color: #cee800;

                    &::after {
                        content: '';
                        display: block;
                        height: clamp(12px, 3.2vw, 48px);
                        background-repeat: no-repeat;
                        background-size: cover;
                    }

                }

                &:nth-child(1) .features-subtitle::after {
                    background-image: url('/themes/kivi/assets/shop/ua/online-services/kyivstar-tv/img/kyivstar-features-1.svg');
                    aspect-ratio: 165/60;
                }

                &:nth-child(2) .features-subtitle::after {
                    background-image: url('/themes/kivi/assets/shop/ua/online-services/kyivstar-tv/img/kyivstar-features-2.svg');
                    aspect-ratio: 191/62;
                }

                &:nth-child(3) .features-subtitle::after {
                    background-image: url('/themes/kivi/assets/shop/ua/online-services/kyivstar-tv/img/kyivstar-features-3.svg');
                    aspect-ratio: 165/60;
                }

                &:nth-child(4) .features-subtitle::after {
                    background-image: url('/themes/kivi/assets/shop/ua/online-services/kyivstar-tv/img/kyivstar-features-4.svg');
                    aspect-ratio: 60/60;
                }

                .mob-hidden {
                    display: none;

                    @media(min-width: 560px) {
                        display: block;

                    }
                }
            }
        }
    }

    .kyivstar-kids {
        background-image: url('/themes/kivi/assets/shop/ua/online-services/kyivstar-tv/img/section-5.jpg');

        .accent-title {
            font-weight: 600;
            font-size: clamp(16px, 5vw, 84px);
            color: #cee800;
        }

        .section-title {
            margin-bottom: min(2vw);

            @media(min-width: 460px) {
                margin-bottom: min(80px, 4vw);
            }
        }

        .kyivstar-list {
            width: 60%;
            display: flex;
            flex-direction: column;
            gap: min(0.7vw, 26px);

            @media(min-width: 560px) {
                gap: min(1.5vw, 26px);
            }
        }

        .kyivstar-text {
            line-height: 100%;
            color: #fff;
            
            @media(min-width: 360px) {
                line-height: 120%;
            }

            @media(min-width: 460px) {
                line-height: 150%;
            }
        }
    }

    .kyivstar-download {
        background-image: url('/themes/kivi/assets/shop/ua/online-services/kyivstar-tv/img/section-6.jpg');

        .download-info {
            width: 60%;
        }

        .accent-title {
            font-weight: 600;
            font-size: clamp(16px, 4.4vw, 77px);
            color: #cee800;
        }

        .section-title {
            color: #cee800;
            margin-bottom: min(1.5vw, 26px);

            @media(min-width: 460px) {
                margin-bottom: min(3vw, 52px);
            }
        }

        .bold-text {
            font-weight: 600;
            color: #fff;
            margin-bottom: min(1.5vw, 26px);

            @media(min-width: 460px){
                margin-bottom: min(3vw, 52px);
            }
        }

        .kyivstar-text {
            line-height: 100%;            
            
            @media(min-width: 360px) {
                line-height: 120%;
            }

            @media(min-width: 460px) {
                line-height: 150%;
            }
        }

        .bonus-text {
            font-weight: 300;
            font-size: clamp(8px, 1.25vw, 22px);
            color: #fff;
            margin-top: min(1.5vw, 26px);

            @media(min-width: 460px){
                margin-top: min(3vw, 52px);
            }

        }
    }
}