/* Same cover crop and overlay; responsive delivery only for the hero component. */
.op-hero--responsive.op-hero--photo { background-image: none; }
.op-hero--responsive .op-hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; z-index: 0; }
.op-hero--responsive::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15, 25, 30, .62) 0%, rgba(15, 25, 30, .62) 65%, rgba(15, 25, 30, .35) 100%); z-index: 1; pointer-events: none; }
.op-hero--responsive > .op-wrap { position: relative; z-index: 2; }
@media (max-width: 960px) { .op-hero--responsive::before { background: linear-gradient(rgba(15, 25, 30, .62), rgba(15, 25, 30, .62)); } }