.accessory-list {
  display: grid;
  column-gap: var(--space-xl);
  padding: 0;
  list-style: none;
}

@media (min-width: 40em) {
  .accessory-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .accessory-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.accessory {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  column-gap: var(--space-m);
  align-content: start;
  padding-block: var(--space-l);
  border-top: 2px dashed var(--color-border);
}

.accessory__icon {
  grid-row: span 2;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-icon);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.accessory__title {
  font-size: var(--font-size-card-title);
}

.accessory__text {
  margin-top: var(--space-2xs);
  color: var(--color-text-muted);
}