.hr-page {
    --green: #5148c8;
    --muted: #403a8f;
}

.hr-visual {
    min-height: 438px;
    background: url("../images/hrBg") center / contain no-repeat;
}

.hr-page .window-bar {
    background: rgba(241, 235, 224, 0.86);
}

.hr-page .approach-card {
    border-left-color: #5148c8;
}

.hr-page .media-card img {
    aspect-ratio: 16 / 9;
    background: #f3f5fb;
}

.hr-page .media-card--wide {
    grid-column: span 2;
}

@media (max-width: 1120px) {
    .hr-visual {
        min-height: 520px;
    }
}

@media (max-width: 680px) {
    .hr-visual {
        min-height: 300px;
    }

    .hr-page .media-card--wide {
        grid-column: auto;
    }
}