.ocf-project-videos {
    background: var(--ocf-bg-alt, #f5f5f5);
}

.ocf-project-videos__header {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: clamp(1.75rem, 4vw, 3rem);
}

.ocf-project-videos__header .heading-2 {
    margin: 0;
}

.ocf-project-videos__accent {
    display: block;
    width: 0.4rem;
    height: 2.5rem;
    background: #A26028;
    border-radius: 999px;
}

.ocf-project-videos__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.85fr) minmax(18rem, 0.65fr);
    gap: clamp(1.25rem, 3vw, 2.5rem);
    align-items: start;
}

.ocf-project-videos__primary {
    display: grid;
    gap: clamp(1.25rem, 3vw, 2rem);
}

.ocf-project-video-card {
    margin: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, #A26028 25%, var(--ocf-border, #ddd));
    border-radius: var(--card-radius, 0.75rem);
    background: #161616;
    box-shadow: var(--card-shadow, 0 0.75rem 2rem rgba(0,0,0,.08));
}

.ocf-project-video-card--landscape {
    aspect-ratio: 16 / 9;
}

.ocf-project-video-card--portrait {
    width: min(100%, 24rem);
    aspect-ratio: 9 / 16;
    margin-inline: auto;
}

.ocf-project-video {
    display: block;
    width: 100%;
    height: calc(100% - 2.75rem);
    background: #111;
}

.ocf-project-video-card--landscape .ocf-project-video { object-fit: cover; }
.ocf-project-video-card--portrait .ocf-project-video { object-fit: contain; }

.ocf-project-video-card figcaption {
    display: flex;
    align-items: center;
    height: 2.75rem;
    padding: 0 1rem;
    color: #fff;
    font-size: var(--font-label-size, .9rem);
    font-weight: var(--font-weight-bold, 700);
}

@media (max-width: 800px) {
    .ocf-project-videos__layout { grid-template-columns: 1fr; }
    .ocf-project-videos__portrait-wrap { order: 2; }
}

@media (max-width: 520px) {
    .ocf-project-videos__header { align-items: flex-start; }
    .ocf-project-videos__accent { height: 2rem; }
    .ocf-project-video-card--portrait { width: min(100%, 20rem); }
}