.devos-building {
    background: var(--devos-beige);
    color: var(--devos-ink);
    padding: 3rem 0 7rem;
}

@media (min-width: 768px) {
    .devos-building {
        padding: 5rem 0 10rem;
    }
}

.devos-building__grid {
    display: grid;
    gap: 3.5rem;
}

@media (min-width: 768px) {
    .devos-building__grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 0;
        align-items: start;
    }

    .devos-building__copy {
        grid-column: 1 / span 4;
    }

    .devos-building__visuals {
        grid-column: 6 / span 7;
    }
}

.devos-building .devos-eyebrow {
    color: var(--devos-oranje);
}

.devos-building .devos-section-title {
    margin-top: 1.75rem;
    color: var(--devos-groen);
}

.devos-building__points {
    list-style: none;
    margin: 3rem 0 0;
    padding: 0;
}

.devos-building__point {
    padding: 1.75rem 0;
    border-top: 1px solid color-mix(in oklab, var(--devos-groen) 15%, transparent);
}

.devos-building__point:first-child {
    border-top: 0;
    padding-top: 0;
}

.devos-building__num {
    color: color-mix(in oklab, var(--devos-oranje) 70%, transparent);
}

.devos-building__point .devos-lede {
    margin-top: 0.75rem;
    color: color-mix(in oklab, var(--devos-ink) 75%, transparent);
}

.devos-building__cta {
    margin-top: 3rem;
}

.devos-building__hero {
    margin: 0;
    overflow: hidden;
}

@media (min-width: 768px) {
    .devos-building__hero {
        margin-right: -6vw;
    }
}

.devos-building__hero-img {
    width: 100%;
    aspect-ratio: 16 / 11;
    object-fit: cover;
    transform: scale(1.05);
}

.devos-building__inset {
    position: relative;
    z-index: 1;
    margin: -3.5rem 0 0 1.5rem;
    width: 66%;
    overflow: hidden;
}

@media (min-width: 768px) {
    .devos-building__inset {
        margin: -6rem 0 0 0;
        width: 50%;
    }
}

.devos-building__inset-img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    transform-origin: 38% 72%;
    will-change: transform;
    animation: devos-kenburns-alt 16s ease-in-out infinite alternate;
}

@keyframes devos-kenburns-alt {
    from { transform: scale(1.06) translate3d(0, 0, 0); }
    to   { transform: scale(1.24) translate3d(3.5%, 4%, 0); }
}