/* Layout Styles */

.main-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

section {
    margin-bottom: var(--spacing-section);
    position: relative;
    z-index: 2;
}

/* Sections with Horizontal Scroll */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
    padding: 0 4vw;
    /* Match original padding roughly */
}

@media (min-width: 1024px) {
    .section-header {
        padding: 0;
        /* Reset for centered container */
    }

    section {
        padding: 0 60px;
        /* Indent slightly on large screens */
    }
}

.section-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 8px;
    /* Tighter spacing to content */
    background: linear-gradient(to right, #fff, #94a3b8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    letter-spacing: -0.02em;
}

.scroll-container {
    display: flex;
    gap: 16px;
    /* Tighter gap for better visual flow */
    overflow-x: auto;
    padding-bottom: 40px;
    /* More space for hover effects not to clip */
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
    padding-left: 4vw;
    padding-right: 4vw;
    /* Improve scroll behavior */
    scroll-behavior: smooth;
}

@media (min-width: 1024px) {
    .scroll-container {
        padding-left: 0;
        padding-right: 0;
        gap: 24px;
        /* Larger gap on desktop */
    }
}

.scroll-container::-webkit-scrollbar {
    display: none;
}

.grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--spacing-card-gap);
}