/* STEP108D flow card infographic backgrounds */
.v2-flow-step {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 220px;
  background: #f7f7ef;
}

.v2-flow-step::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center right;
  opacity: .88;
  filter: saturate(1.08) contrast(.98);
  transform: scale(1.02);
}

.v2-flow-step::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(242,242,234,.76) 0%, rgba(242,242,234,.48) 46%, rgba(242,242,234,.08) 100%),
    linear-gradient(180deg, rgba(242,242,234,.04) 0%, rgba(242,242,234,.32) 100%);
}

.v2-flow-step > * {
  position: relative;
  z-index: 2;
}

.v2-flow-step[data-step="01"]::before { background-image: url("/assets/img/cards/01-smysl.png"); }
.v2-flow-step[data-step="02"]::before { background-image: url("/assets/img/cards/02-vitrina.png"); }
.v2-flow-step[data-step="03"]::before { background-image: url("/assets/img/cards/03-media.png"); }
.v2-flow-step[data-step="04"]::before { background-image: url("/assets/img/cards/04-avtomatizaciya.png"); }
.v2-flow-step[data-step="05"]::before { background-image: url("/assets/img/cards/05-zayavka.png"); }

.v2-flow-step:hover::before {
  opacity: .72;
  filter: saturate(1.18) contrast(1.02);
  transform: scale(1.05);
  transition: opacity .25s ease, transform .35s ease, filter .25s ease;
}

@media (max-width: 900px) {
  .v2-flow-step {
    min-height: 210px;
  }

  .v2-flow-step::before {
    opacity: .44;
    background-position: center right;
  }

  .v2-flow-step::after {
    background:
      linear-gradient(90deg, rgba(242,242,234,.99) 0%, rgba(242,242,234,.94) 62%, rgba(242,242,234,.64) 100%),
      linear-gradient(180deg, rgba(242,242,234,.30) 0%, rgba(242,242,234,.48) 100%);
  }
}