.speaker-grill {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--spacing-3);
}

.speaker-grill__slot {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  opacity: 0.8;
}

.speaker-grill--horizontal .speaker-grill__slot {
  width: 100%;
  height: 4px;
}

.speaker-grill--vertical {
  flex-direction: row;
}

.speaker-grill--vertical .speaker-grill__slot {
  width: 4px;
  height: 100%;
}