main h1 {
    margin-bottom: var(--space-1);
}

#featured {
    padding: 0 var(--space-3) var(--space-3) var(--space-3);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20.5rem, 1fr));
    gap: var(--space-4);
    /* overflow: hidden; */
}

main > * {
    margin-top: var(--space-8);
}

/* #featured {
    padding: 0 var(--space-3) var(--space-3) var(--space-3);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-4);
    overflow: hidden;
} */

#featured h2 {
    text-align: center;
}


@media (max-width: 24.5rem) {
    #featured {
        grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    }
}

@media (max-width: 18rem) {
    #featured {
        grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    }
}