/* Shared by category pages and the focused headwear landing pages. */
#banner-container {
    position: relative;
    display: grid;
    align-items: center;
    min-height: max(15rem, 31.0417vw);
}

#banner-image-container {
    position: absolute;
    inset: 0;
}

#banner-image-container picture,
#banner-image-container img.banner-image {
    display: block;
    width: 100%;
    height: 100%;
}

#banner-image-container img.banner-image {
    object-fit: cover;
    object-position: right center;
}

/* Keep text in normal flow so longer headings can increase the banner height. */
#headings {
    position: relative;
    z-index: 1;
    margin-left: clamp(1rem, 10.8vw, 13rem);
    width: min(48%, 42rem);
    padding: 1.5rem 0;
}

#headings > br { display: none; }
#headings .main-heading { margin-top: 0; margin-bottom: 0.3rem; }
#headings p.main-heading { margin-bottom: 0; }
#headings .description-container { margin-top: 1.25rem; }
#headings .choose-garment { margin: 1.25rem 0 0; max-width: 100%; }

@media only screen and (min-width:64.063em) and (max-width:90em) {
    #headings .description-container { padding: 0.3rem 1rem; background-color: rgba(34, 34, 34, 0.9); }
    #headings .description { color: #fff; }
}

@media only screen and (max-width:40em) {
    #headings { margin-left: 1rem; width: 56%; }
    #headings .main-heading, #headings .white { color: #222 !important; }
    #headings h1.main-heading { font-size: clamp(1.1rem, 3.5vw, 1.75rem); }
    #headings h2.main-heading { font-size: clamp(0.875rem, 3vw, 1.25rem); }
    #headings h3.main-heading { font-size: clamp(0.875rem, 2.6vw, 1.15rem); }
    #banner-image-container img.banner-image { opacity: 0.3; }
}

@media only screen and (min-width:90.063em) {
    #headings h1.main-heading { font-size: 2.2rem; }
    #headings h2.main-heading { font-size: 1.7rem; }
}