.container {
    .hero {
        padding: 8.3vw 0;
        overflow: hidden;

        .hero-title {
            line-height: 117%;
            text-transform: uppercase;
            letter-spacing: -0.01em;
            color: #1A1A1A;
            font-size: 3vw;
        }

        .hero-subtitle {
            font-size: 1.3vw;
            line-height: 160%;
            color: #666;
            margin-top: 1.1vw;
        }

        .hero-list {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            align-items: stretch;
            gap: 1.6vw;
            margin-top: 3.3vw;

            .hero-item {
                display: flex;
                flex-direction: column;
                gap: 0.8vw;
                padding: 1.6vw;
                border-radius: 1.6vw;
                background: #F0F0F0;

                img {
                    width: 9%;
                    padding: 1.3vw;
                    border-radius: 0.9vw;
                    background: #34d07b26;
                }

                .hero-item-title {
                    font-size: 1.3vw;
                    line-height: 140%;
                    text-transform: uppercase;
                    color: #1A1A1A;
                }

                .hero-item-subtitle {
                    font-size: 1vw;
                    line-height: 157%;
                    color: #666;
                }
            }
        }

        .slider {
            width: 100%;
            overflow: visible;
            padding: 8.3vw 0;
            user-select: none;

            .slider-track {
                display: flex;
                gap: 1.6vw;
                transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                will-change: transform;
                cursor: grab;

                .slider-slide {
                    flex: 0 0 20.8vw;
                    transition: transform 0.4s, opacity 0.4s;
                    opacity: 0.45;
                    transform: scale(0.88);
                    pointer-events: none;
                    -webkit-user-drag: none;

                    img {
                        width: 100%;
                        display: block;
                        border-radius: 1.7vw;
                        -webkit-user-drag: none;
                    }
                }

                .slider-slide.active {
                    opacity: 1;
                    transform: scale(1.5);
                    pointer-events: auto;
                }

                .slider-slide.semi-active {
                    opacity: 0.75;
                    transform: scale(1.25);
                    pointer-events: auto;
                }
            }

            .slider-track.dragging {
                transition: none;
                cursor: grabbing;
            }
        }
    }

    .banner {
        display: flex;
        flex-direction: column;
        gap: 2.2vw;
        border-radius: 1.6vw;
        padding: 3.3vw 3.2vw;
        background: #34d07b1a;

        .banner-title {
            font-size: 2vw;
            text-transform: uppercase;
            color: #1A1A1A;
            letter-spacing: 0.02em;

            .mobile-text {
                display: none;
            }
        }

        .banner-subtitle {
            font-size: 1.1vw;
            color: #666;
            line-height: 175%;
            letter-spacing: 0.03em;
        }

        .banner-divider {
            width: 100%;
            height: 1px;
            background: #1a1a1a1a;
        }

        .banner-strong {
            font-size: 1.1vw;
            letter-spacing: 0.07em;
            text-transform: uppercase;
            color: #34D07B;
        }

        .banner-list {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.6vw;
            list-style: none;

            .banner-item {
                font-weight: 500;
                line-height: 157%;
                font-size: 0.9vw;
                text-transform: uppercase;
                color: #1A1A1A;
                letter-spacing: 0.07em;

                &:nth-child(1):before {
                    content: '1';
                    padding: 0.6vw 0.9vw;
                }

                &:nth-child(2):before {
                    content: '2';
                }

                &:nth-child(3):before {
                    content: '3';
                }

                &:nth-child(4):before {
                    content: '4';
                }

                &::before {
                    border-radius: 100px;
                    padding: 0.6vw 0.8vw;
                    color: #1A1A1A;
                    font-weight: 700;
                    letter-spacing: 0.07em;
                    background: #34d07b;
                    margin-right: 0.8vw;
                }
            }
        }
    }

    .for-coach-btn {
        display: block;
        margin: 3.3vw auto 0;
        cursor: pointer;
        font-size: 1vw;
        border-radius: 100px;
        padding: 1.1vw 2.2vw;
        font-weight: 700;
        border: 0;
        text-transform: uppercase;
        color: #1A1A1A;
        background: #34D07B;
        transition: background 0.5s, color 0.5s;
        margin-bottom: 8.3vw;

        &:hover {
            background: #1A1A1A;
            color: #34D07B;
        }
    }
}

@media (max-width: 768px) {
    .container {
        main {
            .hero {
                padding: 8.3vw 0 0;
                .hero-title {
                    font-size: 7.4vw;
                }

                .hero-subtitle {
                    font-size: 3.7vw;
                }

                .hero-list {
                    grid-template-columns: repeat(2, 1fr);
                    gap: 2.2vw;

                    .hero-item {
                        padding: 5.3vw;

                        img {
                            padding: 2.4vw 2.7vw;
                            border-radius: 3.2vw;
                            width: fit-content;
                        }

                        .hero-item-title {
                            font-size: 4.2vw;

                            .desktop-text {
                                display: none;
                            }

                            .mobile-text {
                                display: block;
                            }
                        }

                        .hero-item-subtitle {
                            font-size: 3.2vw;

                            .desktop-text {
                                display: none;
                            }

                            .mobile-text {
                                display: block;
                            }
                        }
                    }
                }

                .slider {
                    padding: 4rem 0;

                    .slider-track {
                        gap: 1rem;

                        .slider-slide {
                            flex: 0 0 70vw;
                            opacity: 1;
                            transform: scale(1.4);

                            img {
                                border-radius: 12px;
                            }
                        }

                        .slider-slide.active {
                            transform: scale(1.4);
                        }

                        .slider-slide.semi-active {
                            opacity: 0.4;
                            transform: scale(1);
                        }
                    }
                }
            }

            .banner {
                padding: 4.8vw;

                .banner-title {
                    font-size: 4.2vw;

                    .desktop-text {
                        display: none;
                    }

                    .mobile-text {
                        display: block;
                    }
                }

                .banner-subtitle {
                    font-size: 3.4vw;
                }

                .banner-strong {
                    font-size: 4.2vw;
                }

                .banner-list {
                    grid-template-columns: 1fr;
                    gap: 3.2vw;

                    .banner-item {
                        font-size: 3.4vw;

                        &:nth-child(1)::before {
                            padding: 1.6vw 2.9vw;
                        }

                        &::before {
                            padding: 1.7vw 2.2vw;
                            margin-right: 1.6vw;
                        }
                    }
                }
            }

            .for-coach-btn {
                padding: 3.7vw 7.4vw;
                font-size: 3.7vw;
            }
        }
    }
}