/* Responsive version of the existing video-list component.
   Shared headings, paragraphs, page width and header remain in common CSS.
   All thumbnails use the same contained frame, including portrait Shorts. */
.area_flex_cont {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px 20px;
    margin-top: 16px;
    margin-bottom: 28px;
}
.flex_cont_sum {
    min-width: 0;
}
.img_sum {
    display: block;
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #e8e8e8;
}
body.content-article-page #main .img_sum > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.img_sum:hover,
.img_sum:focus-visible {
    opacity: 0.75;
}
.img_sum:focus-visible {
    outline: 2px solid #3c4f91;
    outline-offset: 3px;
}
.img_play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 50%;
    pointer-events: none;
}
body.content-article-page #main .img_play > img {
    display: block;
    width: 16px;
    height: auto;
    margin-left: 3px;
}
@media (max-width: 1000px) {
    .area_flex_cont {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 680px) {
    .area_flex_cont {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 14px;
    }
}
/* The listing stays 16:9; playback uses the video's portrait format. */
.lity[data-video-format="portrait"] .lity-container {
    width: calc(56.25vh - 45px);
    max-width: min(420px, calc(100vw - 32px));
}
.lity[data-video-format="portrait"] .lity-iframe-container {
    padding-top: 177.777778%;
}

/* One row only; hidden cards also leave keyboard/accessibility navigation. */
@media (min-width: 681px) and (max-width: 1000px) {
    .video-latest > .flex_cont_sum:nth-child(n+4) { display: none; }
}
@media (max-width: 680px) {
    .video-latest > .flex_cont_sum:nth-child(n+3) { display: none; }
}