body {
    background-color: var(--dark-blue);
}

main {
    gap: 4rem;
}

.office-photo {
    align-self: center;
}

picture {
    display: block;

    img {
        display: block;
        width: 100%;
        border-radius: 2em;
        box-shadow: 0 0 0.4em rgba(0, 0, 0, 0.4);
    }
}

.text-content {
    max-width: 50ch;
}

@media (width < 1238px) {
    main {
        gap: 2em;
    }
}

@media (width < 1180px) {
    main {
        gap: 1em;
        flex-direction: column;
    }

    .text-content {
        width: min(100%, 56ch);
        max-width: 100%;
    }

    picture {
        margin: 0;
    }

    .office-photo {
        order: 1;
    }
}