.dance-cards { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; max-width: 1320px; margin: 0 auto; }
.dance-card { position: relative; height: 570px; min-width: 0; background: transparent; }
.card-copy { height: 52px; width: 100%; text-align: center; }
.card-copy h3 { font: 500 27px var(--sans); margin: 0; }
.card-copy button { background: transparent; color: var(--yellow); border: 0; font: inherit; padding: 10px 0; transition: color .2s; }
.card-copy button:hover { color: var(--paper); }
.card-video { position: absolute; top: 62px; width: 100%; height: calc(100% - 62px); object-fit: contain; background: transparent; border-radius: 5px; }
.card-controls { position: absolute; z-index: 2; top: 60px; left: 50%; transform: translateX(-50%); height: 42px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.card-controls button { width: 38px; height: 38px; border: 1px solid #ffffff70; border-radius: 50%; background: #30363b66; color: var(--paper); display: grid; place-items: center; padding: 0; font-size: 16px; }
.card-controls button:hover, .card-controls [aria-pressed="true"] { background: var(--yellow); color: var(--dark); }
@media(max-width:1100px) { .card-copy h3 { font-size: 23px; } }
@media(max-width:900px) { .dance-cards { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .dance-cards { grid-template-columns: 1fr; } .dance-card { height: 550px; } .card-copy h3 { font-size: 27px; } }