.locations {
    display: flex;
    flex-direction: column;

    /* Between two locations, 92px → 160px. */
    gap: clamp(5.75rem, 5.75rem + (100vw - 24.375rem) * 0.050822, 10rem);

    /* Only the block margin, so the content band keeps centring the block. */
    margin-block: 0;
}

/* Narrow: name, picture, address and button under one another, in the order the design draws
   them — which is why the box around the three of them dissolves below, so the picture can
   stand between name and address.

   Wide: name and button in the first three of the twelve content columns, the address in the
   next three, the picture in the last five; the seventh column stays free between them. The
   picture is the tallest part and gives the row its height, so nothing else stretches to it. */
.locations__location {
    display: grid;
    gap: 1.5rem;

    @media (min-width: 64rem) {
        grid-template-columns: repeat(var(--sav-grid-columns), minmax(0, 1fr));
        column-gap: var(--sav-grid-gutter);
        align-items: start;
    }
}

.locations__body {
    display: contents;

    @media (min-width: 64rem) {
        display: grid;
        grid-column: 1 / span 6;
        grid-template-columns: repeat(2, minmax(0, 1fr));

        /* The name takes the first row, the second one is what the address leaves — which is
           what the button below aligns its end to. The row gap only shows itself where there
           is no address to leave anything: then the button follows the name directly. */
        grid-template-rows: auto 1fr;
        gap: 1.5rem var(--sav-grid-gutter);
    }
}

/* The design gives the name the dark blue rather than the blue every heading carries, and
   leaves the pin in front of it blue. */
.locations__name {
    display: flex;

    /* Between pin and name, 8px → 13px. */
    gap: clamp(0.5rem, 0.5rem + (100vw - 24.375rem) * 0.003736, 0.8125rem);
    color: var(--sav-color-dunkelblau);
}

/* One line tall, so the pin stays on the first line of a name that wraps. */
.locations__pin {
    display: flex;
    flex: none;
    align-items: center;
    block-size: var(--sav-text-headline-s-line);
    color: var(--sav-color-blau);

    & .icon {
        inline-size: 1.5rem;
        block-size: 1.5rem;
    }
}

.locations__address {
    order: 2;
    font-style: normal;

    @media (min-width: 64rem) {
        grid-row: 1 / -1;
        grid-column: 2;
    }
}

/* The design leaves one blank line between the address and the two contacts, and none where
   there is no address above them. */
.locations__lines + .locations__contact {
    margin-block-start: var(--sav-text-m-line);
}

/* As in the footer: dark blue rather than blue, underlined only once it is pointed at. */
.locations__link {
    color: var(--sav-color-dunkelblau);
    text-decoration: none;

    &:hover {
        color: var(--sav-color-dunkelblau-hover);
        text-decoration: underline;
    }

    &:focus-visible {
        outline: 2px solid var(--sav-color-dunkelblau);
        outline-offset: 2px;
    }
}

.locations__maps {
    order: 3;

    /* As wide as its label rather than as wide as its column. */
    justify-self: start;

    @media (min-width: 64rem) {
        grid-row: 2;
        grid-column: 1;
        align-self: end;
    }
}

.locations__image {
    order: 1;
    inline-size: 100%;
    border-radius: var(--sav-radius);

    /* The design draws the picture in the same shape at both widths and crops to it, since an
       upload arrives in whatever proportion it was photographed. */
    aspect-ratio: 545 / 322;
    object-fit: cover;

    @media (min-width: 64rem) {
        grid-column: 8 / span 5;
    }
}