.yt-card-wrap { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,0.10); transition: transform 0.2s ease, box-shadow 0.2s ease; } .yt-card-wrap:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.18); }  .yt-thumb-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #000; flex-shrink: 0; } .yt-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; } .yt-card-wrap:hover .yt-thumb-wrap img { transform: scale(1.04); }  .yt-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; background: rgba(255, 0, 0, 0.88); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; padding-left: 4px; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; z-index: 2; } .yt-card-wrap:hover .yt-play-btn { background: rgb(255, 0, 0); transform: translate(-50%, -50%) scale(1.12); }  .yt-duration { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.80); color: #fff; font-size: 12px; font-weight: 600; padding: 2px 7px; border-radius: 4px; letter-spacing: 0.02em; z-index: 2; }  .yt-info { padding: 14px; display: flex; flex-direction: column; flex-grow: 1; }  .yt-title { font-size: 0.95rem; font-weight: 600; margin: 0; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }  .yt-thumb-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }  @media (max-width: 900px) { .yt-thumb-wrap { aspect-ratio: 16 / 9; } } @media (max-width: 560px) { .yt-thumb-wrap { aspect-ratio: 16 / 9; } } .yt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; } @media (max-width: 900px) { .yt-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .yt-grid { grid-template-columns: 1fr; } }