.lf-configurator {
  background: var(--lf-color-light);
  padding: var(--lf-space-6) 0 var(--lf-space-7);
}
.lf-configurator__inner {
  max-width: var(--lf-container-max-padded);
  margin: 0 auto;
  padding: 0 var(--lf-container-margin);
}
.lf-configurator__title {
  font-family: var(--lf-font-heading);
  font-size: var(--lf-h1-size);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--lf-color-ink);
  margin: 0 0 var(--lf-space-2);
}
.lf-configurator__subtitle {
  font-family: var(--lf-font-body);
  font-size: var(--lf-body-m-size);
  color: var(--lf-color-ink);
  opacity: 0.65;
  margin: 0 0 var(--lf-space-6);
}
.lf-configurator__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1314 / 794;
  background: var(--lf-color-cream);
  overflow: hidden;
}
.lf-configurator__main-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.25s ease;
}
.lf-configurator__main-image.is-fading {
  opacity: 0;
}
.lf-configurator__swatches {
  display: flex;
  gap: var(--lf-space-4);
  margin-top: var(--lf-space-5);
}
.lf-configurator__swatch {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--lf-space-2);
  width: 180px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--lf-font-body);
}
.lf-configurator__swatch-image {
  display: block;
  width: 100%;
  aspect-ratio: 460 / 170;
  background-size: cover;
  background-position: center;
  border: 2px solid transparent;
  outline: 2px solid rgba(44, 42, 41, 0.12);
  outline-offset: -2px;
  transition: outline-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.lf-configurator__swatch:hover .lf-configurator__swatch-image {
  transform: translateY(-2px);
}
.lf-configurator__swatch[aria-pressed="true"] .lf-configurator__swatch-image {
  border-color: var(--lf-color-primary);
  outline-color: var(--lf-color-primary);
}
.lf-configurator__swatch-code {
  font-size: var(--lf-body-s-size);
  color: var(--lf-color-ink);
  text-align: center;
  letter-spacing: 0.04em;
}

@media (max-width: 720px) {
  .lf-configurator__swatches {
    flex-wrap: wrap;
  }
  .lf-configurator__swatch {
    width: calc(50% - var(--lf-space-4) / 2);
  }
}