.bring-memories {
    background-color: #f1eae1;
}

.bring-memories__inner {
    max-width: var(--container-width-wide);
    margin-inline: auto;
    padding-inline: clamp(var(--space-3), 4vw, 3.75rem);
    padding-block: clamp(var(--space-5), 6vw, 3.5rem);
    display: grid;
    /* minmax(0, …) rather than a bare 1fr: 1fr means minmax(auto, 1fr), so a
       track whose min-content is wider than its share pushes the grid past the
       container. Nothing sets overflow-x on html/body, so that widening reaches
       the page and produces a horizontal scrollbar. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "content media"
        "thumbs media";
    column-gap: clamp(var(--space-5), 6vw, 4rem);
    row-gap: var(--space-4);
}

.bring-memories__content {
    grid-area: content;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
}

.bring-memories__heading {
    font-size: 64px;
    line-height: 58px;
}

.bring-memories__description {
    max-width: 26rem;
    color: var(--color-text);
    font-family: var(--font-family-base);
    font-size: 18px;
    line-height: 26px;
}

.bring-memories__description p {
    margin: 0;
}

.bring-memories__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* min-height so a wrapped or translated label is not clipped. */
    min-height: 48px;
    padding-inline: var(--space-5);
    border-radius: var(--radius);
    background-color: var(--color-grey-1);
    color: var(--color-beige-2);
    font-family: var(--font-family-base);
    font-weight: 700;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.bring-memories__button:hover,
.bring-memories__button:focus-visible {
    opacity: 0.85;
}

.bring-memories__media {
    grid-area: media;
}

.bring-memories__compare {
    --split: 50%;
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 12px;
    cursor: col-resize;
    /* pan-y, not none. This is the whole 4/3 media box, not a small handle, and
       on mobile it spans the full width — with touch-action: none every vertical
       swipe that began on the image was handed to the script, so the page could
       not be scrolled past this section at all. pan-y leaves vertical panning
       with the browser while horizontal movement still reaches the compare
       handler; the browser then fires pointercancel, which the reset below
       already handles. */
    touch-action: pan-y;
    user-select: none;
}

/* One pair of layers per photo, all present in the document. Only the selected
   pair is shown, so switching a thumbnail is a class change rather than a fresh
   image download. Kept out of the hit-testing and out of the accessibility tree
   while hidden. */
.bring-memories__compare-pair {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
}

.bring-memories__compare-pair.is-active {
    opacity: 1;
    visibility: visible;
}

.bring-memories__compare-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.bring-memories__compare-bw {
    filter: grayscale(100%);
}

.bring-memories__compare-color {
    clip-path: inset(0 0 0 var(--split));
}

.bring-memories__compare-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--split);
    width: 2px;
    transform: translateX(-50%);
    background-color: color-mix(in srgb, var(--color-cream) 85%, transparent);
    pointer-events: none;
}

.bring-memories__compare-handle {
    position: absolute;
    top: 50%;
    left: var(--split);
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--color-cream);
    pointer-events: none;
}

.bring-memories__compare-handle-icon {
    display: inline-flex;
    width: 24px;
    height: 24px;
}

.bring-memories__compare-handle-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.bring-memories__thumbs-wrap {
    grid-area: thumbs;
    align-self: end;
    justify-self: start;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: fit-content;
}

.bring-memories__thumbs {
    display: flex;
    gap: var(--space-2);
}

.bring-memories__ornament {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
}

.bring-memories__ornament-line {
    flex: 1;
    height: 1px;
    background-color: var(--color-orange-dark);
}

.bring-memories__ornament-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.bring-memories__ornament-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.bring-memories__thumb {
    width: 64px;
    height: 64px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}

.bring-memories__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bring-memories__thumb:hover {
    opacity: 0.85;
}

.bring-memories__thumb.is-active {
    opacity: 1;
    border-color: var(--color-orange-dark);
}

@media (max-width: 899px) {
    .bring-memories__inner {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "content"
            "media"
            "thumbs";
    }

    .bring-memories__content {
    }

    .bring-memories__heading {
        font-size: 40px;
        line-height: 36px;
        letter-spacing: -2%;
    }

    .bring-memories__description {
        font-size: 16px;
        line-height: 24px;
    }

    .bring-memories__button {
        width: 100%;
        border-radius: 8px;
    }

    .bring-memories__thumbs-wrap {
        margin-right: auto;
        margin-left: auto;
    }

    .bring-memories__thumbs {
        justify-content: center;
        gap:var(--space-3);
    }

}