.sv-section { margin-block: 32px 38px; }
.sv-format + .sv-format { margin-top: clamp(27px, 3vw, 43px); }
.sv-format > .section-head { align-items: center; }
.sv-section .heading-icon > svg { width: 26px; height: 26px; fill: var(--accent); fill-rule: evenodd; }
.sv-grid { display: grid; gap: 17px; grid-template-columns: repeat(3,minmax(0,1fr)); }
.sv-card { display: flex; min-width: 0; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 7px; overflow: hidden; color: var(--ink); }
.sv-card:hover { border-color: var(--accent-line); }
.sv-preview { display: block; position: relative; overflow: hidden; aspect-ratio: 16/9; background: linear-gradient(140deg,#283344,#171e2c); }
.sv-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-play { position: absolute; right: 10px; bottom: 9px; display: grid; place-items: center; width: 31px; height: 26px; background: #0a101bd9; color: #eef6ff; border: 1px solid #92b4d066; border-radius: 5px; }
.sv-play svg { width: 17px; height: 17px; fill: currentColor; }
.sv-card:hover .sv-play, .sv-card:focus-visible .sv-play { background: var(--accent); color: #14181f; }
.sv-details { display: grid; gap: 5px; padding: 13px 16px 17px; }
.sv-date { font: 600 12px/1.3 var(--body); color: var(--accent); }
.sv-title { font: 700 clamp(20px,1.9vw,26px)/1.12 var(--display); text-wrap: pretty; overflow-wrap: anywhere; }
.sv-status { font-size: .78rem; color: #adb5c0; margin: .55rem 0 0; }
.sv-shorts .sv-card { display: grid; grid-template-columns: clamp(64px, 7.5vw, 100px) minmax(0,1fr); align-items: center; }
.sv-shorts .sv-preview { width: 100%; aspect-ratio: 9/16; align-self: stretch; }
.sv-shorts .sv-preview img { position: absolute; inset: 0; }
.sv-shorts .sv-title { font-size: clamp(18px, 1.6vw, 23px); }
.sv-curated > h2 { color: var(--ink); font: 700 25px/1.15 var(--display); margin: 1.5rem 0 .75rem; }
@media (min-width:561px) {
  .sv-curated:has(.sv-card:only-child) { display: flex; align-items: center; gap: 16px; border-block: 1px solid var(--line); padding: 9px 0; margin-top: 16px; }
  .sv-curated:has(.sv-card:only-child) > h2 { margin: 0; font-size: 18px; }
  .sv-curated .sv-grid:has(.sv-card:only-child) { display: block; }
  .sv-curated .sv-card:only-child { flex-direction: row; align-items: center; gap: 10px; padding-right: 12px; }
  .sv-curated .sv-card:only-child .sv-preview { width: 70px; flex: none; }
  .sv-curated .sv-card:only-child .sv-play { display: none; }
  .sv-curated .sv-card:only-child .sv-details { padding: 4px 0; gap: 2px; }
  .sv-curated .sv-card:only-child .sv-title { font-size: 17px; }
  .sv-curated .sv-card:only-child .sv-date { font-size: 10px; }
}
@media (max-width: 760px) {
  .sv-grid { gap: 10px; }
  .sv-details { padding: 10px; }
}
@media (min-width: 561px) and (max-width: 760px) {
  .sv-shorts .sv-card { display: flex; }
  .sv-shorts .sv-preview { aspect-ratio: 4/3; }
  .sv-shorts .sv-details { align-self: stretch; }
}
@media (max-width: 560px) {
  .sv-section { margin-block: 24px 30px; }
  .sv-grid { grid-template-columns: 1fr; }
  .sv-card { display: grid; grid-template-columns: minmax(90px,36%) minmax(0,1fr); align-items: center; }
  .sv-preview { width: 100%; }
  .sv-title { font-size: 18px; }
  .sv-play { width: 25px; height: 21px; right: 6px; bottom: 5px; }
  .sv-play svg { width: 14px; height: 14px; }
}