.ytce-grid {
    display: grid;
    gap: 1rem;
}
.ytce-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ytce-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ytce-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
    .ytce-cols-4, .ytce-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .ytce-grid { grid-template-columns: 1fr; }
}

.ytce-item {
    background:#fff;
    border:1px solid #eee;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,.04);
}

.ytce-thumb {
    position:relative;
    aspect-ratio:16/9;
    cursor:pointer;
    background:#000;
    display:flex;
    align-items:center;
    justify-content:center;
}
.ytce-thumb img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.ytce-play {
    position:absolute;
    font-size:3rem;
    line-height:1;
    background:rgba(0,0,0,.35);
    padding:.25em .5em;
    border-radius:.5em;
    color:#fff;
}

.ytce-meta { padding:.75rem; }
.ytce-title { font-weight:600; text-decoration:none; display:block; margin-bottom:.15rem; }
.ytce-title:hover { text-decoration:underline; }
.ytce-date { color:#666; font-size:.9em; }

.ytce-load-wrap { text-align:center; margin-top:1rem; }
.ytce-load-more {
    padding:.6rem 1rem;
    border-radius:6px;
    border:1px solid #ddd;
    background:#f7f7f7;
    cursor:pointer;
}

.ytce-iframe {
    width:100%;
    height:100%;
    border:0;
}