/* ===== Om oss =====
   Ingress, en bred bild pa hela Twofour, fakta i
   samma rader som Sakerhet (.trust-facts i theme.css) bredvid en bildmosaik,
   och kontaktytan med ansiktena bakom kontaktkortet.
   Egen fil for att theme.css andras parallellt i headerarbetet.
   ponytail: flytta in i theme.css nar headern ar mergad. */

.about-wide {
    margin-block-start: var(--wp--preset--spacing--70);
}

.about-wide img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    object-position: 50% 62%;
    border-radius: var(--radius-module);
}

.about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: start;
}

.about-grid > * {
    margin-block: 0;
}

.about-grid .trust-facts,
.about-grid .wp-block-buttons {
    margin-block-start: var(--wp--preset--spacing--50);
}

.about-mosaic {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--wp--preset--spacing--30);
}

.about-mosaic > * {
    margin: 0;
}

.about-mosaic > :last-child {
    grid-column: 1 / -1;
}

.about-mosaic img,
.about-contact img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-module);
}

.about-mosaic > :last-child img {
    aspect-ratio: 16 / 9;
}

.about-contact .wp-block-buttons {
    margin-block-start: var(--wp--preset--spacing--50);
}

.about-next {
    margin-block-start: var(--wp--preset--spacing--50);
    color: var(--color-text-light);
}

@media (max-width: 1000px) {
    .about-grid {
        grid-template-columns: 1fr;
    }

    .about-wide img {
        aspect-ratio: 3 / 2;
    }
}