.roof-calculator-hero .breadcrumbs {
  margin: 0 0 18px;
}

/* Фотография должна быть видна в первом экране, но не мешать заголовку и шагам. */
.roof-calculator-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.roof-calculator-hero::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: url("calculator-illustrations/roof-calculator-background.webp") right center / cover no-repeat;
  opacity: .12;
  content: "";
  pointer-events: none;
}

.roof-calculator-hero > .container {
  position: relative;
  z-index: 1;
}

/* Та же фактура остаётся в свободной области формы. */
.roof-calculator {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.roof-calculator::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: url("calculator-illustrations/roof-calculator-background.webp") right bottom / cover no-repeat;
  opacity: .12;
  content: "";
  pointer-events: none;
}

.roof-calculator > * {
  position: relative;
  z-index: 1;
}

/* Схемы помогают выбрать сценарий и тип крыши, но остаются вторичным слоем. */
.roof-calculator-mode,
.roof-type-grid span {
  position: relative;
  overflow: hidden;
}

.roof-calculator-mode > img,
.roof-type-grid span > img {
  position: absolute;
  right: 9px;
  bottom: 8px;
  display: block;
  width: 78px;
  height: 52px;
  object-fit: contain;
  opacity: .42;
  pointer-events: none;
  transition: opacity .18s ease;
}

.roof-calculator-mode > b,
.roof-calculator-mode > span,
.roof-type-grid span > b,
.roof-type-grid span > small {
  position: relative;
  z-index: 1;
  max-width: 70%;
}

.roof-calculator-mode.is-selected > img,
.roof-type-grid input:checked + span > img {
  opacity: .68;
}

.roof-type-grid span {
  min-height: 112px;
}

.roof-type-grid span > img {
  width: 98px;
  height: 64px;
  right: 7px;
  bottom: 7px;
}

@media (max-width: 560px) {
  .roof-calculator-mode > img {
    width: 84px;
    height: 56px;
  }

  .roof-type-grid span > img {
    width: 102px;
    height: 66px;
  }
}