/* Art Galleries — unified slide CSS for all 7 museum sources (met,
 * aic, cleveland, smithsonian, walters, loc, british_museum). Per-museum
 * palette is driven by CSS custom properties set inline from the template
 * context (palette.header_color / palette.title_text / palette.title_bg);
 * the photo URL is on --ag-photo-url. No museum-specific logos — wordmark
 * is just the museum name as text. Layout/typography taken from the prior
 * Smithsonian design (the most polished of the per-museum variants). */

/* ── Main zone ─────────────────────────────────────────────────────── */
.art-galleries-main-wrap {
    width: 100cqw;
    height: 100cqh;
    padding: 5cqh 5cqw;
    container-type: size;
    font-family: 'Roboto', sans-serif;
    display: block;
    /* Theme: slide bg fill = 3rd lightest (c3), with the artwork image
       laid on top at low opacity as a soft backdrop above the fill. */
    background: var(--ag-c3, transparent);
    color: #0b1220;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    isolation: isolate;
}
.art-galleries-main-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--ag-photo-url);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.25;
    z-index: 0;
    pointer-events: none;
}
.art-galleries-main-wrap > .art-galleries-main-grid {
    position: relative;
    z-index: 1;
}

.art-galleries-main-wrap .art-galleries-main-grid {
    width: 100%;
    height: 100%;
    display: grid;
    column-gap: 5cqmin;
    row-gap: 3cqmin;
}

.art-galleries-main-wrap--portrait .art-galleries-main-grid {
    grid-template-columns: 40% 1fr;
    /* Right-column split: top half = stack + title, bottom half = body. */
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        "photo header"
        "photo body";
}

.art-galleries-main-wrap--square .art-galleries-main-grid {
    grid-template-columns: 40% 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "photo header"
        "photo body";
}

.art-galleries-main-wrap--landscape .art-galleries-main-grid {
    grid-template-columns: 100%;
    /* Rows: header (content) / 5cqh spacer / photo (fills rest) /
       3cqmin spacer / body (27cqh). The two spacer rows give us
       independent control over the header→photo and photo→body gaps. */
    grid-template-rows: auto 5cqh 1fr 5cqh 20cqh;
    grid-template-areas:
        "header"
        "."
        "photo"
        "."
        "body";
    row-gap: 0;
}

.art-galleries-main-wrap.art-galleries-main-wrap--landscape .art-galleries-main-header-band {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 3cqmin;
}
.art-galleries-main-wrap.art-galleries-main-wrap--landscape .art-galleries-main-title {
    font-size: 3.2cqmin;
    align-self: center;
}

.art-galleries-main-wrap .art-galleries-main-photo-band {
    grid-area: photo;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    container-type: size;
}

.art-galleries-main-wrap .art-galleries-main-header-band {
    grid-area: header;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1.2cqmin;
    min-width: 0;
}

.art-galleries-main-wrap .art-galleries-main-body-band {
    grid-area: body;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/* Wooden frame around the photo — aspect-ratio drives width from height. */
.art-galleries-main-wrap .art-galleries-main-frame {
    position: relative;
    aspect-ratio: var(--ag-photo-aspect, 1 / 1);
    height: 100cqh;
    width: auto;
    max-width: 100cqw;
    max-height: 100cqh;
    box-sizing: border-box;
    background:
        repeating-linear-gradient(92deg,
            transparent 0 1.4cqmin,
            rgba(28, 14, 6, 0.18) 1.4cqmin 1.7cqmin),
        linear-gradient(135deg,
            oklab(36% 0.07 0.07) 0%,
            oklab(56% 0.06 0.08) 28%,
            oklab(72% 0.04 0.09) 50%,
            oklab(56% 0.06 0.08) 72%,
            oklab(36% 0.07 0.07) 100%);
    box-shadow: 0 0.6cqmin 2.4cqmin rgba(11, 18, 32, 0.30);
}
.art-galleries-main-wrap .art-galleries-main-frame::before {
    content: "";
    position: absolute;
    inset: 6cqmin;
    background-image: var(--ag-photo-url);
    background-color: #f3f4f6;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow:
        inset 0 0 0 0.25cqmin rgba(0, 0, 0, 0.55),
        0 0 0.6cqmin rgba(0, 0, 0, 0.45);
}

/* Portrait header layout:
   - Stack: museum name + featured label, each on its own line, autofit
     by JS to fill the cell's available width on one line.
   - Title (--portrait variant) sits BELOW the stack, full-width,
     autofit on one line as well. */
/* Landscape header band overrides — the band is a flex column with
   align-items: flex-start (so children shrink to content); landscape
   needs the inner row to fill the full band width AND height. */
.art-galleries-main-wrap.art-galleries-main-wrap--landscape .art-galleries-main-header-band {
    align-items: stretch;
    flex-direction: column;
    justify-content: stretch;
    gap: 0;
    width: 100%;
    height: 100%;
}

/* Landscape header row: horizontal 50/50 — LEFT = museum name + featured
   label stacked (vertically 50/50), RIGHT = artwork title. All autofit
   to fill their available space on a single line each. */
.art-galleries-main-wrap--landscape .art-galleries-main-header-row--landscape {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    width: 100%;
    /* Height is content-driven (cells inside have fixed cqh heights). */
    height: auto;
    column-gap: 2cqmin;
    flex: 0 0 auto;
}
.art-galleries-main-wrap--landscape .art-galleries-main-header-row--landscape .art-galleries-main-header-left {
    display: grid;
    /* Fixed-height cells (in cqh) so the band auto-sizes to text needs
       and the autofit has real availH to scale into. */
    grid-template-rows: 7cqh 7cqh;
    row-gap: 0;
    width: 100%;
    height: auto;
    min-width: 0;
}
.art-galleries-main-wrap--landscape .art-galleries-main-header-row--landscape .art-galleries-main-header-cell--name,
.art-galleries-main-wrap--landscape .art-galleries-main-header-row--landscape .art-galleries-main-header-cell--label {
    justify-content: flex-start;
}
/* Close the visual gap between the two lines by pinning text 1 to the
   bottom of its cell and text 2 to the top of its cell. */
.art-galleries-main-wrap--landscape .art-galleries-main-header-row--landscape .art-galleries-main-header-cell--name {
    align-items: flex-end;
}
.art-galleries-main-wrap--landscape .art-galleries-main-header-row--landscape .art-galleries-main-header-cell--label {
    align-items: flex-start;
}

.art-galleries-main-wrap .art-galleries-main-header-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    row-gap: 1cqmin;
    min-width: 0;
}

/* Header cell: flexbox alignment. Height is set per layout variant
   (portrait: 10cqh per cell in the stack; landscape: 100% of the
   header row, which is sized by the grid). */
.art-galleries-main-wrap .art-galleries-main-header-cell {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}
.art-galleries-main-wrap--portrait .art-galleries-main-header-stack .art-galleries-main-header-cell {
    height: 10cqh;
}
.art-galleries-main-wrap--landscape .art-galleries-main-header-row--landscape .art-galleries-main-header-cell {
    height: 100%;
}

/* Landscape title — sits in the right half of the header band,
   full-width within that half, autofit on a single line. */
.art-galleries-main-wrap--landscape .art-galleries-main-title.art-galleries-main-title--landscape {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 1.2cqmin;
    /* Theme: title bg = c6, title text = c1. */
    background-color: var(--ag-c6, var(--ag-title-bg, #009ade));
    color: var(--ag-c1, var(--ag-title-text, #ffffff));
    box-sizing: border-box;
    overflow: hidden;
    max-width: none;
}

/* Higher specificity to win against `.art-galleries-main-wrap .art-galleries-main-title`
   below (which sets width:fit-content for the original square/landscape design). */
.art-galleries-main-wrap--portrait .art-galleries-main-title.art-galleries-main-title--portrait {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    /* Give the title a tall cell so the autofit binary search converges
       on a font size that's bound by WIDTH (so text fills the line),
       not bound by height. */
    height: 22cqh;
    margin: 2cqh 0 0;
    padding: 0 1.2cqmin;
    /* Theme: title bg = 1 lighter than darkest (c6), title text = lightest (c1). */
    background-color: var(--ag-c6, var(--ag-title-bg, #009ade));
    color: var(--ag-c1, var(--ag-title-text, #ffffff));
    box-sizing: border-box;
    overflow: hidden;
    max-width: none;
}

/* Single-line auto-fit target. JS (fitArtGalleriesText) measures each
   cell and sets font-size so the text fills the cell on one line. The
   CSS font-size is just a fallback; JS overrides it on render. */
.art-galleries-main-wrap .art-galleries-main-fit-line {
    display: inline-block;
    white-space: nowrap;
    line-height: 1;
    max-width: 100%;
}

/* Original header structure — used for square + landscape. Portrait
   uses the autofit header-top variant defined above. */
.art-galleries-main-wrap .art-galleries-main-header-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: start;
    padding: 0;
    flex-shrink: 0;
    gap: 1.2cqmin;
}

.art-galleries-main-wrap .art-galleries-main-wordmark {
    display: flex;
    align-items: center;
    align-self: flex-start;
    gap: 1.4cqmin;
}
.art-galleries-main-wrap .art-galleries-main-wordmark-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 5.3cqmin;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #1a1a1a;
    line-height: 1;
}

.art-galleries-main-wrap .art-galleries-main-header {
    margin-top: 0;
    line-height: 1;
    font-size: 3.6cqmin;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--ag-header-color, #e86c1c);
}
/* Theme: "Featured Item" label colour = 2 lighter than darkest (c5),
   museum name = darkest (c7). Applies to all variants. */
.art-galleries-main-wrap .art-galleries-main-header {
    color: var(--ag-c5, var(--ag-header-color, #e86c1c));
}
.art-galleries-main-wrap .art-galleries-main-wordmark-text {
    color: var(--ag-c7, #1a1a1a);
}

.art-galleries-main-wrap .art-galleries-main-title {
    font-family: 'Montserrat', 'Roboto', sans-serif;
    font-size: 5cqmin;
    font-weight: 700;
    line-height: 1.15;
    /* Theme: title bg = 1 lighter than darkest (c6), text = lightest (c1). */
    color: var(--ag-c1, var(--ag-title-text, #ffffff));
    background-color: var(--ag-c6, var(--ag-title-bg, #009ade));
    padding: 0.6cqmin 1.2cqmin;
    margin: 0;
    text-align: start;
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
    -webkit-text-stroke: 0;
    text-shadow: none;
}

.art-galleries-main-wrap .art-galleries-main-body {
    font-family: 'Roboto', sans-serif;
    font-size: 2cqmin;
    font-weight: 400;
    line-height: 1.55;
    color: #0b1220;
    margin: 0;
    width: 100%;
    flex: 1 1 0;
    min-height: 0;
    text-align: start;
    overflow: hidden;
    -webkit-text-stroke: 0;
    text-shadow: none;
}
/* Portrait theme: description text = darkest (c7). */
/* Theme: description body text = darkest (c7). Applies to all variants. */
.art-galleries-main-wrap .art-galleries-main-body,
.art-galleries-main-wrap .art-galleries-main-desc {
    color: var(--ag-c7, #0b1220);
}

.art-galleries-main-wrap .art-galleries-main-desc {
    margin: 0 0 1cqmin;
    font-size: inherit;
    line-height: inherit;
}

.art-galleries-main-wrap .art-galleries-main-facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.8cqmin;
    font-size: inherit;
    line-height: inherit;
}

.art-galleries-main-wrap .art-galleries-main-facts li {
    margin: 0;
    padding: 0;
    font-size: inherit;
    line-height: inherit;
}

.art-galleries-main-wrap .art-galleries-fact-label {
    font-family: 'Montserrat', 'Roboto', sans-serif;
    font-weight: 700;
}

/* ── Sidebar zone ──────────────────────────────────────────────────── */
.art-galleries-sidebar-wrap {
    width: 100cqw;
    height: 100cqh;
    margin: 0;
    container-type: size;
    font-family: 'Roboto', sans-serif;
    position: relative;
    background: #ffffff;
    color: #1a1a1a;
    overflow: hidden;
    isolation: isolate;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.art-galleries-sidebar-wrap .art-galleries-sidebar-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.25;
    z-index: 0;
}

.art-galleries-sidebar-wrap .art-galleries-sidebar-content {
    position: relative;
    z-index: 2;
    width: 80cqw;
    height: 90cqh;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3cqmin 2.5cqmin;
    box-sizing: border-box;
    gap: 1.5cqmin;
}

.art-galleries-sidebar-wrap .art-galleries-sidebar-wordmark {
    font-family: 'Montserrat', sans-serif;
    font-size: 4cqmin;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
    color: #1a1a1a;
    line-height: 1;
    margin-bottom: 0.4cqmin;
}

.art-galleries-sidebar-wrap .art-galleries-sidebar-header {
    font-size: 3.4cqmin;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--ag-header-color, #009ade);
    line-height: 1;
}

.art-galleries-sidebar-wrap .art-galleries-sidebar-frame {
    position: relative;
    width: min(72cqw, 45cqh);
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    box-sizing: border-box;
    margin: 3cqmin 0 2cqmin;
    background:
        repeating-linear-gradient(92deg,
            transparent 0 1.4cqmin,
            rgba(28, 14, 6, 0.18) 1.4cqmin 1.7cqmin),
        linear-gradient(135deg,
            oklab(36% 0.07 0.07) 0%,
            oklab(56% 0.06 0.08) 28%,
            oklab(72% 0.04 0.09) 50%,
            oklab(56% 0.06 0.08) 72%,
            oklab(36% 0.07 0.07) 100%);
    box-shadow: 0 0.8cqmin 2.6cqmin rgba(0, 0, 0, 0.55);
}

.art-galleries-sidebar-wrap .art-galleries-sidebar-photo {
    position: absolute;
    inset: 4cqmin;
    background-image: var(--ag-photo-url);
    background-color: #f3f4f6;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow:
        inset 0 0 0 0.25cqmin rgba(0, 0, 0, 0.55),
        0 0 0.6cqmin rgba(0, 0, 0, 0.45);
}

.art-galleries-sidebar-wrap .art-galleries-sidebar-title {
    font-family: 'Montserrat', 'Roboto', sans-serif;
    font-size: 4cqmin;
    font-weight: 700;
    line-height: 1.18;
    color: var(--ag-title-text, #ffffff);
    background-color: var(--ag-title-bg, #009ade);
    padding: 0.7cqmin 1.4cqmin;
    margin: 0;
    text-align: start;
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
    -webkit-text-stroke: 0;
    text-shadow: none;
}

.art-galleries-sidebar-wrap .art-galleries-sidebar-body {
    font-family: 'Roboto', sans-serif;
    font-size: 2cqmin;
    font-weight: 400;
    line-height: 1.5;
    color: #1a1a1a;
    margin: 0;
    text-align: start;
    align-self: stretch;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    -webkit-text-stroke: 0;
}

/* ── Banner zone ───────────────────────────────────────────────────── */
.art-galleries-banner-wrap {
    width: 90cqw;
    height: 80cqh;
    margin: auto;
    container-type: size;
    font-family: 'Roboto', sans-serif;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2.5cqw;
    background: #ffffff;
    color: #0b1220;
    padding: 0 3cqmin;
    box-sizing: border-box;
    overflow: hidden;
}

.art-galleries-banner-wrap .art-galleries-banner-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-shrink: 0;
    gap: 3cqmin;
    min-width: 0;
}

.art-galleries-banner-wrap .art-galleries-banner-wordmark {
    font-family: 'Montserrat', sans-serif;
    font-size: 10cqmin;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #1a1a1a;
    line-height: 1.05;
    text-align: center;
    max-width: 24cqw;
}

.art-galleries-banner-wrap .art-galleries-banner-header {
    font-size: 5.5cqmin;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--ag-header-color, #e86c1c);
    line-height: 1;
}

.art-galleries-banner-wrap .art-galleries-banner-photo {
    flex-shrink: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3cqmin;
}

.art-galleries-banner-wrap .art-galleries-banner-frame {
    height: 80%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: #f3f4f6;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
    border: 1.8cqmin solid var(--ag-title-bg, #1f4e8c);
    box-shadow:
        inset 0 0 0 1.8cqmin #ffffff,
        0 0 0 1.8cqmin var(--ag-header-color, #f7a01d),
        0 0.5cqmin 1.6cqmin rgba(11, 18, 32, 0.22);
    box-sizing: border-box;
}

.art-galleries-banner-wrap .art-galleries-banner-credit {
    font-size: 3cqmin;
    color: #9ca3af;
    font-style: italic;
    letter-spacing: 0.02em;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.art-galleries-banner-wrap .art-galleries-banner-text {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.4cqmin;
    min-width: 0;
    height: 100%;
    padding: 2cqmin 0;
    box-sizing: border-box;
}

.art-galleries-banner-wrap .art-galleries-banner-title {
    font-family: 'Montserrat', 'Roboto', sans-serif;
    font-size: 8cqmin;
    font-weight: 700;
    line-height: 1.18;
    color: var(--ag-title-text, #ffffff);
    background-color: var(--ag-title-bg, #1f4e8c);
    padding: 0.6cqmin 1.2cqmin;
    margin: 0;
    text-align: start;
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
    -webkit-text-stroke: 0;
    text-shadow: none;
}

.art-galleries-banner-wrap .art-galleries-banner-body {
    font-family: 'Roboto', sans-serif;
    font-size: 2cqmin;
    font-weight: 400;
    line-height: 1.5;
    color: #0b1220;
    margin: 0;
    text-align: start;
    align-self: stretch;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    -webkit-text-stroke: 0;
    text-shadow: none;
}

/* ── Split zone (narrow vertical) ──────────────────────────────────── */
.art-galleries-split-wrap {
    width: 80cqw;
    height: 90cqh;
    margin: auto;
    container-type: size;
    font-family: 'Roboto', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5cqmin;
    background: #ffffff;
    color: #0b1220;
    padding: 3cqmin 2.5cqmin;
    box-sizing: border-box;
    overflow: hidden;
    text-align: center;
}

.art-galleries-split-wrap .art-galleries-split-wordmark {
    font-family: 'Montserrat', sans-serif;
    font-size: 8cqmin;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #1a1a1a;
    line-height: 1.05;
    margin-bottom: 2cqmin;
    text-align: center;
    max-width: 100%;
}

.art-galleries-split-wrap .art-galleries-split-header {
    font-size: 4.4cqmin;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--ag-header-color, #e86c1c);
    line-height: 1;
}

.art-galleries-split-wrap .art-galleries-split-title {
    font-family: 'Montserrat', 'Roboto', sans-serif;
    font-size: 4.4cqmin;
    font-weight: 700;
    line-height: 1.18;
    color: var(--ag-title-text, #ffffff);
    background-color: var(--ag-title-bg, #1f4e8c);
    padding: 0.6cqmin 1.2cqmin;
    margin: 0;
    text-align: start;
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
    -webkit-text-stroke: 0;
    text-shadow: none;
}

.art-galleries-split-wrap .art-galleries-split-frame {
    width: min(80cqw, 50cqh);
    height: min(80cqw, 50cqh);
    border-radius: 50%;
    background-color: #f3f4f6;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
    border: 1.3cqmin solid var(--ag-title-bg, #1f4e8c);
    box-shadow:
        inset 0 0 0 1.3cqmin #ffffff,
        0 0 0 1.3cqmin var(--ag-header-color, #f7a01d),
        0 0.5cqmin 2cqmin rgba(11, 18, 32, 0.22);
    box-sizing: border-box;
    margin: 5cqmin 0 0;
}

.art-galleries-split-wrap .art-galleries-split-body {
    font-family: 'Roboto', sans-serif;
    font-size: 1.95cqmin;
    font-weight: 400;
    line-height: 1.5;
    color: #0b1220;
    margin: 0;
    text-align: start;
    align-self: stretch;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    -webkit-text-stroke: 0;
    text-shadow: none;
}

.art-galleries-split-wrap .art-galleries-split-credit {
    font-size: 2.2cqmin;
    color: #9ca3af;
    font-style: italic;
    letter-spacing: 0.02em;
    text-align: center;
    max-width: 100%;
    margin-bottom: 5cqmin;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── SplitV zone ───────────────────────────────────────────────────── */
.art-galleries-splitv-wrap {
    width: 90cqw;
    height: 80cqh;
    margin: auto;
    container-type: size;
    font-family: 'Roboto', sans-serif;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2.5cqw;
    background: #ffffff;
    color: #0b1220;
    padding: 0 3cqmin;
    box-sizing: border-box;
    overflow: hidden;
}

.art-galleries-splitv-wrap .art-galleries-splitv-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-shrink: 0;
    gap: 3cqmin;
    min-width: 0;
}

.art-galleries-splitv-wrap .art-galleries-splitv-wordmark {
    font-family: 'Montserrat', sans-serif;
    font-size: 10cqmin;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #1a1a1a;
    line-height: 1.05;
    text-align: center;
    max-width: 24cqw;
}

.art-galleries-splitv-wrap .art-galleries-splitv-header {
    font-size: 5.5cqmin;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--ag-header-color, #e86c1c);
    line-height: 1;
}

.art-galleries-splitv-wrap .art-galleries-splitv-photo {
    flex-shrink: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3cqmin;
}

.art-galleries-splitv-wrap .art-galleries-splitv-frame {
    height: 80%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: #f3f4f6;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
    border: 1.8cqmin solid var(--ag-title-bg, #1f4e8c);
    box-shadow:
        inset 0 0 0 1.8cqmin #ffffff,
        0 0 0 1.8cqmin var(--ag-header-color, #f7a01d),
        0 0.5cqmin 1.6cqmin rgba(11, 18, 32, 0.22);
    box-sizing: border-box;
}

.art-galleries-splitv-wrap .art-galleries-splitv-credit {
    font-size: 3cqmin;
    color: #9ca3af;
    font-style: italic;
    letter-spacing: 0.02em;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.art-galleries-splitv-wrap .art-galleries-splitv-text {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.4cqmin;
    min-width: 0;
    height: 100%;
    padding: 2cqmin 0;
    box-sizing: border-box;
}

.art-galleries-splitv-wrap .art-galleries-splitv-title {
    font-family: 'Montserrat', 'Roboto', sans-serif;
    font-size: 8cqmin;
    font-weight: 700;
    line-height: 1.18;
    color: var(--ag-title-text, #ffffff);
    background-color: var(--ag-title-bg, #1f4e8c);
    padding: 0.6cqmin 1.2cqmin;
    margin: 0;
    text-align: start;
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
    -webkit-text-stroke: 0;
    text-shadow: none;
}

.art-galleries-splitv-wrap .art-galleries-splitv-body {
    font-family: 'Roboto', sans-serif;
    font-size: 2cqmin;
    font-weight: 400;
    line-height: 1.5;
    color: #0b1220;
    margin: 0;
    text-align: start;
    align-self: stretch;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    -webkit-text-stroke: 0;
    text-shadow: none;
}