.choice-photo {
  position: relative;
  display: block;
  height: 132px;
  overflow: hidden;
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 8px;
  background-color: #edf5f3;
  background-position: center;
  background-size: cover;
  transition: transform 180ms ease, filter 180ms ease;
}

.choice-card[data-value="kozijn"] .choice-photo {
  background-image: url("assets/product-kozijn-photo.webp");
}

.choice-card[data-value="schuifpui"] .choice-photo {
  background-image: url("assets/product-schuifpui-photo.webp");
}

.choice-card[data-value="deur"] .choice-photo {
  background-image: url("assets/product-deur-photo.webp");
}

.choice-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 58%, rgba(7, 18, 19, 0.28));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.choice-card:hover .choice-photo,
.choice-card[aria-pressed="true"] .choice-photo {
  transform: scale(1.035);
}

.choice-card[aria-pressed="true"] .choice-photo {
  border-color: rgba(15, 118, 110, 0.58);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

@media (max-width: 560px) {
  .choice-card.visual-choice {
    min-height: 246px;
  }

  .choice-photo {
    height: 176px;
  }
}