/* Compositions index and Listen & Watch. */

.filters {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  align-items: end;
  margin-block-end: var(--space-l);
}

.filters__count {
  padding-block-end: var(--space-2xs);
}

.works {
  margin-block-end: var(--space-l);
}

.media-list {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: repeat(auto-fill, minmax(min(26rem, 100%), 1fr));
}

.media-item > * + * {
  margin-block-start: var(--space-xs);
}

.embed {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-m);
  background: var(--panel-700);
}

.embed--audio {
  aspect-ratio: auto;
  height: 10rem;
}

.embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.embed__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: var(--space-3xs);
  width: 100%;
  background: none;
  border: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--step-2);
}

.embed__play:hover {
  background: var(--panel);
}

.embed__play .meta {
  font-family: var(--font-body);
}