/* BASE STYLES */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Manrope', sans-serif;
            background-color: #ffffff;
            color: #1f2024;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* Mirror Figma layer structure (n_62a9b) */
        .main-container {
            width: 100%;
            max-width: 1440px;
            padding-top: 70px;
            padding-bottom: 182px;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 0 auto;
        }

        .content-width {
            width: 1084px;
        }

        /* POPULAR WEB STORIES TITLE (n_07ab9) */
        .section-title {
            font-family: 'Manrope', sans-serif;
            font-size: 40px;
            font-weight: 800;
            line-height: 60px;
            color: #1f2024;
            margin-bottom: 40px;
            /* 282 (img start) - 182 (title start) - 60 (title height) = 40 */
            text-align: left;
            width: 100%;
        }

        /* STORIES GRID (n_f82bd) */
        .stories-grid {
            display: grid;
            grid-template-columns: repeat(3, 345px);
            column-gap: 24px;
            /* 787 - (418 + 345) = 24 */
            row-gap: 107px;
            /* 775 (row2 img start) - 668 (row1 date end) = 107 */
            width: 100%;
            align-items: start;
        }

        /* STORY CARD (Link) */
        .story-card {
            display: flex;
            flex-direction: column;
            text-decoration: none;
            color: inherit;
            width: 345px;
            transition: transform 0.2s ease-in-out;
        }

        .story-card:hover {
            transform: translateY(-4px);
        }

        .story-card img.story-image {
            width: 345px !important;
            height: 200px !important;
            max-width: 345px !important;
            max-height: 200px !important;
            object-fit: cover !important;
            display: block;
            margin-bottom: 24px;
            border: none;
            background-color: #f5f5f5;
        }

        /* STORY CONTENT (n_0de44 etc) */
        .story-content {
            display: flex;
            flex-direction: column;
            gap: 8px;
            /* From styles: gap: 8px */
        }

        .story-title {
            font-family: 'Manrope', sans-serif;
            font-size: 22px;
            font-weight: 700;
            line-height: 30px;
            color: #1a2845;
            min-height: 30px;
        }

        .story-excerpt {
            font-family: 'Manrope', sans-serif;
            font-size: 18px;
            font-weight: 400;
            line-height: 28px;
            color: #383e48;
        }

        .story-date {
            font-family: 'Manrope', sans-serif;
            font-size: 16px;
            font-weight: 500;
            color: #383e48;
            margin-top: 16px;
            /* 644 (date start) - 544 (excerpt start) - 84 (excerpt height) = 16 */
            line-height: 24px;
        }

        /* PORTRAIT BANNER (n_ba1b6) */
        .banner-card {
            width: 345px;
            height: 469px;
            transition: transform 0.2s ease-in-out;
        }

        .banner-card:hover {
            transform: translateY(-4px);
        }

        .banner-item {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border: none;
        }

        .mobile-sticky-banner {
            display: none;
        }

        /* TABLET MEDIA QUERY (768px - 1024px) */
        @media (max-width: 1024px) {
            .main-container {
                width: 100%;
                padding-top: 80px;
                padding-bottom: 80px;
            }

            .content-width {
                width: calc(100% - 80px);
                /* 40px padding on each side */
            }

            .stories-grid {
                grid-template-columns: repeat(2, 1fr);
                column-gap: 24px;
                row-gap: 60px;
            }

            .story-card,
            .banner-card,
            .story-image {
                width: 100%;
            }

            .banner-card {
                display: none;
            }

            .banner-card {
                height: auto;
                aspect-ratio: 345 / 469;
            }

            .story-image {
                height: auto;
                aspect-ratio: 345 / 200;
            }

            .section-title {
                font-size: 32px;
                line-height: 48px;
                margin-bottom: 32px;
            }
        }

        /* MOBILE MEDIA QUERY (320px - 767px) */
        @media (max-width: 767px) {
            .main-container {
                padding-top: 60px;
                padding-bottom: 60px;
            }

            .content-width {
                width: calc(100% - 40px);
                /* 20px padding on each side */
            }

            .stories-grid {
                grid-template-columns: 1fr;
                row-gap: 48px;
                justify-items: center;
            }

            .story-card,
            .banner-card {
                width: 100%;
                max-width: 387px;
            }

            .story-image {
                width: 100%;
                max-width: 387px;
                height: 200px;
                object-fit: cover;
            }

            .section-title {
                font-size: 28px;
                line-height: 38px;
                margin-bottom: 24px;
            }

            .story-title {
                font-size: 20px;
                line-height: 28px;
            }

            .story-excerpt {
                font-size: 16px;
                line-height: 24px;
            }

            .story-date {
                margin-top: 12px;
            }

            .banner-card {
                display: none;
            }

            .mobile-sticky-banner {
                display: flex;
                align-items: center;
                position: fixed;
                bottom: 0;
                left: 0;
                width: 100%;
                z-index: 1000;
            }

            .sticky-banner-image {
                width: 100%;
                display: block;
            }

            .sticky-banner-close {
                position: absolute;
                top: 8px;
                right: 12px;
                background: rgba(0, 0, 0, 0.4);
                color: #ffffff;
                border: none;
                border-radius: 50%;
                width: 24px;
                height: 24px;
                font-size: 16px;
                line-height: 1;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .mobile-sticky-banner.hidden {
                display: none !important;
            }
        }