.brand-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--space-s);
  padding: 0;
  list-style: none;
}

@media (min-width: 40em) {
  .brand-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-m);
  }
}

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

@media (min-width: 75em) {
  .brand-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.brand-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 11rem;
  perspective: 60rem;
}

.brand-card__trigger {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--radius-card);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.brand-card__toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.brand-card__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-radius: var(--radius-card);
  transform-style: preserve-3d;
  transition: transform var(--duration-flip) var(--easing-flip);
}

.brand-card__face {
  position: relative;
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  padding: var(--space-s);
  border-radius: var(--radius-card);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.brand-card__face--front {
  align-items: center;
  border: 1px solid var(--color-border);
  background-color: var(--color-card-front);
  text-align: center;
}

.brand-card__face--back {
  gap: var(--space-xs);
  background-color: var(--color-dark-surface);
  color: var(--color-text-on-dark);
  transform: rotateY(180deg);
}

.brand-card__face--front::after {
  content: "";
  position: absolute;
  top: var(--space-xs);
  right: var(--space-xs);
  width: 1.25rem;
  height: 1.25rem;
  background-color: var(--color-text-muted);
  -webkit-mask: url("../assets/images/icons/flip.svg") center / contain no-repeat;
  mask: url("../assets/images/icons/flip.svg") center / contain no-repeat;
}

.brand-card__logo {
  width: 100%;
  max-width: 11rem;
  height: 5rem;
  margin-block: auto;
  object-fit: contain;
}

.brand-card__category {
  align-self: stretch;
  padding-top: var(--space-xs);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-caption);
  font-weight: 500;
  color: var(--color-text-muted);
}

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

.brand-card__name {
  display: block;
  color: var(--color-highlight-on-dark);
}

.brand-card__range {
  display: block;
  margin-top: var(--space-2xs);
  font-size: var(--font-size-caption);
  font-weight: 500;
}

.brand-card__text {
  font-size: var(--font-size-card-text);
  line-height: 1.45;
  -webkit-hyphens: auto; /* ältere Safari-Versionen */
  hyphens: auto;
  overflow-wrap: break-word;
}

@media (min-width: 40em) {
  .brand-card__face {
    padding: var(--space-m);
  }
}

.brand-card:has(.brand-card__toggle:checked) .brand-card__inner {
  transform: rotateY(180deg);
}

@media (hover: hover) and (pointer: fine) {
  .brand-card:hover .brand-card__inner {
    transform: rotateY(180deg);
  }
}

.brand-card:has(.brand-card__toggle:focus-visible) .brand-card__inner {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 3px;
}

@supports not selector(:has(*)) {
  .brand-card:focus-within .brand-card__inner {
    transform: rotateY(180deg);
  }
}