/* Review notes, 2026-10-24. Responsive portfolio and Narrative rows. */
.home #commercial .portfolio-layout, .home #narrative .portfolio-layout {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 0 10px;
    overflow: visible;
}
.home #commercial .portfolio-layout > li, .home #narrative .portfolio-layout > li {
    float: none;
    width: auto;
    min-width: 0;
    margin: 0;
}
.home .portfolio-layout .scale-with-grid { width: 100%; height: auto; }
.home #commercial .image-wrapper:focus-within .extra-links { top: 50% !important; }
.home #commercial .extra-links a:focus-visible { outline: 2px solid #ff722c; outline-offset: 3px; }
@media (hover: none) {
    .home #commercial .image-wrapper .extra-links { top: 50% !important; }
}
.home #narrative .narrative-films {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin: 24px 10px 0;
}
.home #narrative .narrative-films > .columns { width: auto; float: none; margin: 0; min-width: 0; }
.home #narrative .narrative-films .wp-caption { width: 100% !important; max-width: 100%; box-sizing: border-box; }
.home #narrative .narrative-films video {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    object-fit: contain;
}
.home #narrative .narrative-films img { max-width: 100%; height: auto; }
@media (min-width: 768px) and (max-width: 959px) {
    .home #commercial .portfolio-layout, .home #narrative .portfolio-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .home #commercial .portfolio-layout, .home #narrative .portfolio-layout,
    .home #narrative .narrative-films { grid-template-columns: minmax(0, 1fr); }
}