.company-layout-container {
    container: company-layout / inline-size;
}

#company-contact,
#company-categories,
#company-content {
    padding-block-start: var(--s-sm);
    padding-inline: var(--s-sm);
    border-inline: 1px solid var(--c-frame);
}

:where(#company-contact, #company-categories)>h2 {
    padding-block-end: var(--s-xs);
}

#company-categories>h2 {
    padding-block-start: var(--s-xs);
}

#company-content {
    border-block-end: 1px solid var(--c-frame);
    padding-block: var(--s-sm);
}

:where(#company-products, #company-brands, #company-articles)>h2 {
    color: var(--c-g-12);
    background: var(--c-p-3);
    padding: var(--s-sm)
}

:where(#company-products, #company-brands, #company-articles)>.flow {
    padding: var(--s-sm);
    border: 1px solid var(--c-frame);
    border-block-start: unset;
}

@container company-layout (min-width: 60rem) {
    .company-layout-container>.company-layout {
        display: grid;
        grid-template-columns: 1fr 24rem;
        column-gap: var(--s-sm);
    }

    .company-layout-container>.company-layout>* {
        grid-column: 1/1;
    }

    .company-layout-container>.company-layout #company-deets {
        grid-column: 2/2;
    }

    #company-deets {
        grid-row: 1/99;
    }

    #company-deets>div {
        position: sticky;
        top: var(--stick-offset, 5rem);
    }

    #company-contact,
    #company-categories {
        padding-inline: unset;
        border-inline: unset;
        padding-block-start: unset;
    }

    :where(#company-contact, #company-categories)>h2 {
        /* color: var(--c-g-12); */
        border: 1px solid var(--c-frame);
        background: var(--c-ao-11);
        padding: var(--s-2xs);
        margin: unset;
    }

    #company-categories>h2 {
        padding-block-start: var(--s-2xs);
        background: var(--c-ab-11);
    }

    :where(#company-contact, #company-categories)>.flow {
        padding: var(--s-2xs);
        border: 1px solid var(--c-frame);
        border-block-start: unset;
    }

    #company-categories {
        margin-block-start: var(--s-sm);
    }

}


/* header */
.company-display-content-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s-sm);
}

.company-display-content-header>*:nth-child(2) {
    order: -1;
    flex: 8rem 1 1;
}

.company-display-content-header>div {
    flex: 18rem 3.2 1;
}

.company-display-content-header img {
    aspect-ratio: 1.5;
    background: white;
    object-fit: contain;
    padding: var(--s-2xs);
}

/* GAL */
.company-display-content-header [popover] {
    max-block-size: 92vh;
    position: fixed;
    inline-size: 100%;
    max-inline-size: var(--w-content);
}

.company-display-content-header [popover] img {
    max-block-size: calc(90vh - var(--s-sm)* 2);
    block-size: 100%;
    inline-size: 100%;
    max-inline-size: 100%;
    margin: auto;
}

.company-display-content-header .caption {
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(3px);
    color: white;
    padding: var(--s-3xs);
    max-inline-size: calc(100% - 1rem);
    inline-size: fit-content;
    text-align: start;
    line-height: 1.2;
    font-size: var(--fs--2);
    block-size: fit-content;
}

.company-display-content-header>.image-container {
    transition: opacity 0.3s;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}

.company-display-content-header>.image-container:where(:hover, :focus-within) {
    opacity: 0.6;
}

.company-display-content-header .gal-btn-placer {
    display: flex;
    justify-content: end;
}

.company-display-content-header .gal-mag-btn {
    --padding: var(--s-4xs);
    --hPadding: var(--s-4xs);
    --fPadding: var(--s-4xs);
    --aPadding: var(--s-4xs);
    --color: var(--c-white-point);
    --hColor: var(--c-white-point);
    --fColor: var(--c-white-point);
    --aColor: var(--c-white-point);
    --background: none;
    --hBackground: var(--c-black-point);
    --fBackground: var(--c-black-point);
    --aBackground: var(--c-black-point);
    --border: 1px solid var(--c-white-point);
    --hBorder: 1px solid var(--c-white-point);
    --fBorder: 1px solid var(--c-white-point);
    --aBorder: 1px solid var(--c-white-point);
    background: rgba(0, 0, 0, 0.35);
    margin: 0;
}

.company-display-content-header .gal-mag-btn::after {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
}

.company-display-content-header .gal-mag-btn>svg {
    inline-size: clamp(1rem, 0.85rem + 1vw, 1.5rem);
}

.box {
    aspect-ratio: 1;
    padding: 0.2rem;
    border: 1px solid var(--c-input-frame);
}

.box>svg {
    inline-size: 100%;
    block-size: 100%;
}

.contact-layout>*:nth-child(1) {
    --lmw: 1.875rem;
}