#header img {
    height:             60px;
}

@media screen and (max-width: 600px) {
    #hero-banner {
        height:         auto;
        padding:        60px 20px;
    }
    h1.text-6xl {
        font-size:      3rem;
    }
    h2.text-5xl {
        font-size:      2rem;
    }
    .banner-btns {
        flex-direction: column;
        gap:            10px;
    }
    .banner-btns > a,
    #cta-section a {
        width:          100%;
    }
    .banner-btns.space-x-4 > :not([hidden]) ~ :not([hidden]),
    #cta-section > div > div.space-x-6 > :not([hidden]) ~ :not([hidden])
    {
        margin-left:    0;
        margin-right:   0;
    }
    #product-filters {
        overflow-x:     scroll;
        overflow-y:     hidden;
    }
    #cta-section > div > div {
        flex-direction: column;
        gap:            10px;
    }
}