/* The four first-step scenes occupy the card itself, without affecting layout. */
.quiz-card .quiz-options--objects .quiz-option {
  --quiz-option-surface: 255, 253, 250;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 116px;
  overflow: hidden;
  padding: 16px 48px 16px 42%;
}

.quiz-card .quiz-options--objects .quiz-option.is-selected {
  --quiz-option-surface: 241, 232, 220;
}

.quiz-card .quiz-options--objects .quiz-option__art {
  position: absolute;
  z-index: 0;
  inset: 0 auto 0 0;
  width: 42%;
  height: 100%;
  pointer-events: none;
}

.quiz-card .quiz-options--objects .quiz-option__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  opacity: .86;
  filter: brightness(1.05) contrast(.9);
}

.quiz-card .quiz-options--objects .quiz-option__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(var(--quiz-option-surface), 0) 55%,
    rgba(var(--quiz-option-surface), .65) 75%,
    rgba(var(--quiz-option-surface), 1) 100%
  );
}

.quiz-card .quiz-options--objects .quiz-option__copy {
  position: relative;
  z-index: 2;
  min-width: 0;
  height: 40px;
  align-content: start;
}

.quiz-card .quiz-options--objects .quiz-option::after {
  z-index: 3;
  right: 22px;
}

.quiz-card:has(.quiz-panel[data-quiz-step="1"].is-active) .quiz-next:not(:disabled) {
  background: #77553a;
  color: #fff;
}

.quiz-card:has(.quiz-panel[data-quiz-step="1"].is-active) .quiz-next:not(:disabled) span {
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .quiz-card:has(.quiz-panel[data-quiz-step="1"].is-active) .quiz-next:hover:not(:disabled) {
    background: #67482f;
  }
}

@media (max-width: 1000px) {
  .quiz-card .quiz-options--objects .quiz-option {
    min-height: 104px;
  }
}

@media (max-width: 620px) {
  .quiz-card .quiz-options--objects .quiz-option {
    min-height: 96px;
    padding: 14px 40px 14px 42%;
  }

  .quiz-card .quiz-options--objects .quiz-option::after {
    right: 16px;
  }
}
