.bdb-photo-composition {
    --bdb-photo-radius: 14px;
    box-sizing: border-box;
    width: 100%;
    max-width: var(--bdb-photo-max-width, 1000px);
    min-width: 0;
    margin-inline: auto;
    display: grid;
    gap: clamp(10px, 2.5vw, 28px);
    align-items: center;
    isolation: isolate;
}
.bdb-photo-composition[data-bdb-radius="none"] { --bdb-photo-radius: 0px; }
.bdb-photo-composition[data-bdb-radius="round"] { --bdb-photo-radius: 34px; }
.bdb-photo-composition[data-bdb-ratio="1/1"] { --bdb-photo-aspect: 1 / 1; }
.bdb-photo-composition[data-bdb-ratio="4/3"] { --bdb-photo-aspect: 4 / 3; }
.bdb-photo-composition[data-bdb-ratio="3/2"] { --bdb-photo-aspect: 3 / 2; }
.bdb-photo-composition[data-bdb-ratio="16/9"] { --bdb-photo-aspect: 16 / 9; }
.bdb-photo-composition[data-bdb-ratio="3/4"] { --bdb-photo-aspect: 3 / 4; }
.bdb-photo-composition[data-bdb-ratio="2/3"] { --bdb-photo-aspect: 2 / 3; }
.bdb-photo-composition > .bdb-photo-composition__photo {
    position: relative;
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    margin: 0;
    overflow: hidden;
    aspect-ratio: var(--bdb-photo-aspect, 4 / 5);
    border-radius: var(--bdb-photo-radius);
    background: #f5f0ef;
}
.bdb-photo-composition[data-bdb-shadow="true"] > .bdb-photo-composition__photo {
    box-shadow: 0 16px 38px rgba(50, 35, 42, .16);
}
.bdb-photo-composition > .bdb-photo-composition__photo > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* One photograph. */
.bdb-photo-composition[data-bdb-count="1"] { max-width: min(100%, var(--bdb-photo-max-width, 1000px)); }
.bdb-photo-composition[data-bdb-count="1"] > .bdb-photo-composition__photo { aspect-ratio: var(--bdb-photo-aspect, 3 / 2); }
.bdb-photo-composition[data-bdb-count="1"][data-bdb-layout="offset"] { position: relative; padding: 0 5% 5% 0; }
.bdb-photo-composition[data-bdb-count="1"][data-bdb-layout="offset"]::before {
    content: '';
    position: absolute;
    inset: 5% 0 0 5%;
    border: 1px solid #d3bcc5;
    border-radius: var(--bdb-photo-radius);
    pointer-events: none;
}
.bdb-photo-composition[data-bdb-count="1"][data-bdb-layout="offset"] > .bdb-photo-composition__photo { z-index: 1; }
.bdb-photo-composition[data-bdb-count="1"][data-bdb-layout="polaroid"] { padding: 2% 5%; }
.bdb-photo-composition[data-bdb-count="1"][data-bdb-layout="polaroid"] > .bdb-photo-composition__photo {
    aspect-ratio: var(--bdb-photo-aspect, 4 / 3);
    border: clamp(8px, 1.5vw, 18px) solid #fff;
    border-bottom-width: clamp(22px, 4vw, 48px);
    border-radius: min(6px, var(--bdb-photo-radius));
    transform: rotate(-2deg);
}
/* Two photographs: intentionally restrained overlap. */
.bdb-photo-composition[data-bdb-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bdb-photo-composition[data-bdb-count="2"][data-bdb-layout="grid"] > .bdb-photo-composition__photo { aspect-ratio: var(--bdb-photo-aspect, 4 / 5); }
.bdb-photo-composition[data-bdb-count="2"][data-bdb-layout="stagger"] > .bdb-photo-composition__photo:first-child { transform: translateY(-5%); }
.bdb-photo-composition[data-bdb-count="2"][data-bdb-layout="stagger"] > .bdb-photo-composition__photo:nth-child(2) { transform: translateY(5%); }
.bdb-photo-composition[data-bdb-count="2"][data-bdb-layout="overlap"] { grid-template-columns: 1fr; padding: 5% 4%; }
.bdb-photo-composition[data-bdb-count="2"][data-bdb-layout="overlap"] > .bdb-photo-composition__photo {
    grid-area: 1 / 1;
    width: 62%;
    aspect-ratio: var(--bdb-photo-aspect, 4 / 5);
}
.bdb-photo-composition[data-bdb-count="2"][data-bdb-layout="overlap"] > .bdb-photo-composition__photo:first-child { justify-self: start; transform: translateY(-10%); z-index: 1; }
.bdb-photo-composition[data-bdb-count="2"][data-bdb-layout="overlap"] > .bdb-photo-composition__photo:nth-child(2) { justify-self: end; transform: translateY(12%); z-index: 2; }
.bdb-photo-composition[data-bdb-count="2"][data-bdb-layout="scattered"] { padding-block: 6%; }
.bdb-photo-composition[data-bdb-count="2"][data-bdb-layout="scattered"] > .bdb-photo-composition__photo:first-child { transform: translate(4%, -5%) rotate(-6deg); z-index: 1; }
.bdb-photo-composition[data-bdb-count="2"][data-bdb-layout="scattered"] > .bdb-photo-composition__photo:nth-child(2) { transform: translate(-4%, 6%) rotate(4deg); z-index: 2; }
/* Three or four photographs. */
.bdb-photo-composition[data-bdb-count="3"],
.bdb-photo-composition[data-bdb-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bdb-photo-composition[data-bdb-count="3"][data-bdb-layout="collage"] { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.bdb-photo-composition[data-bdb-count="3"][data-bdb-layout="collage"] > .bdb-photo-composition__photo:first-child { grid-row: span 2; height: 100%; aspect-ratio: auto; }
.bdb-photo-composition[data-bdb-count="3"][data-bdb-layout="collage"] > .bdb-photo-composition__photo:not(:first-child) { aspect-ratio: var(--bdb-photo-aspect, 4 / 3); }
.bdb-photo-composition[data-bdb-count="4"][data-bdb-layout="collage"] { grid-template-columns: 1.25fr .75fr; }
.bdb-photo-composition[data-bdb-count="4"][data-bdb-layout="collage"] > .bdb-photo-composition__photo:nth-child(2),
.bdb-photo-composition[data-bdb-count="4"][data-bdb-layout="collage"] > .bdb-photo-composition__photo:nth-child(3) { aspect-ratio: var(--bdb-photo-aspect, 1 / 1); }
.bdb-photo-composition[data-bdb-count="4"][data-bdb-layout="collage"] > .bdb-photo-composition__photo:nth-child(4) { aspect-ratio: var(--bdb-photo-aspect, 4 / 3); }
/* The arch preserves its curved top even when the general corner setting is square. */
.bdb-photo-composition[data-bdb-layout="arch"] > .bdb-photo-composition__photo {
    aspect-ratio: var(--bdb-photo-aspect, 3 / 4);
    border-radius: 50% 50% var(--bdb-photo-radius) var(--bdb-photo-radius) / 38% 38% var(--bdb-photo-radius) var(--bdb-photo-radius);
}
.bdb-photo-composition[data-bdb-count="1"][data-bdb-layout="arch"] { max-width: min(72%, var(--bdb-photo-max-width, 1000px)); }
.bdb-photo-composition[data-bdb-count="2"][data-bdb-layout="arch"] { padding-block: 4%; }
.bdb-photo-composition[data-bdb-count="2"][data-bdb-layout="arch"] > .bdb-photo-composition__photo:first-child { transform: translateY(-4%); }
.bdb-photo-composition[data-bdb-count="2"][data-bdb-layout="arch"] > .bdb-photo-composition__photo:nth-child(2) { transform: translateY(4%); }
.bdb-photo-composition:is([data-bdb-count="3"],[data-bdb-count="4"])[data-bdb-layout="arch"] > .bdb-photo-composition__photo:nth-child(even) { transform: translateY(5%); }
.bdb-photo-composition:is([data-bdb-count="3"],[data-bdb-count="4"])[data-bdb-layout="stagger"] { padding-block: 4%; }
.bdb-photo-composition:is([data-bdb-count="3"],[data-bdb-count="4"])[data-bdb-layout="stagger"] > .bdb-photo-composition__photo:nth-child(odd) { transform: translateY(-5%); }
.bdb-photo-composition:is([data-bdb-count="3"],[data-bdb-count="4"])[data-bdb-layout="stagger"] > .bdb-photo-composition__photo:nth-child(even) { transform: translateY(5%); }
.bdb-photo-composition:is([data-bdb-count="3"],[data-bdb-count="4"])[data-bdb-layout="scattered"] { padding: 5% 3%; gap: clamp(4px, 1.5vw, 16px); }
.bdb-photo-composition:is([data-bdb-count="3"],[data-bdb-count="4"])[data-bdb-layout="scattered"] > .bdb-photo-composition__photo:nth-child(4n+1) { transform: translate(4%, -3%) rotate(-5deg); z-index: 2; }
.bdb-photo-composition:is([data-bdb-count="3"],[data-bdb-count="4"])[data-bdb-layout="scattered"] > .bdb-photo-composition__photo:nth-child(4n+2) { transform: translate(-3%, 6%) rotate(4deg); z-index: 1; }
.bdb-photo-composition:is([data-bdb-count="3"],[data-bdb-count="4"])[data-bdb-layout="scattered"] > .bdb-photo-composition__photo:nth-child(4n+3) { transform: translate(2%, -2%) rotate(3deg); z-index: 1; }
.bdb-photo-composition:is([data-bdb-count="3"],[data-bdb-count="4"])[data-bdb-layout="scattered"] > .bdb-photo-composition__photo:nth-child(4n+4) { transform: translate(-4%, 4%) rotate(-4deg); z-index: 2; }
@media (max-width: 600px) {
    .bdb-photo-composition { gap: 10px; }
    .bdb-photo-composition[data-bdb-radius="round"] { --bdb-photo-radius: 20px; }
    .bdb-photo-composition[data-bdb-count="2"][data-bdb-layout="overlap"] > .bdb-photo-composition__photo { width: 63%; }
}