/* «Было» — секции 1–2, «стало» — 3–4. Цифра 20rem — акцентный размер блока (в ui-kit крупнейший — 10rem). */
.case-content__blocks > .case-before-after {
  grid-column: 1 / -1;
}

.case-before-after {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 2rem;
}

.case-before-after__side {
  border-top: 1px solid #d4d4d4;
  padding-top: 4.8rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.case-before-after__value-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.case-before-after__side--before .case-before-after__value-row {
  padding-right: 4rem;
}

.case-before-after__value {
  font-family: var(--dewi);
  font-size: 20rem;
  font-weight: 400;
  line-height: 100%;
  letter-spacing: -0.8rem;
}

.case-before-after__arrow {
  flex: none;
  width: 12rem;
  height: 12rem;
  color: var(--text-color);
  fill: none; /* в теме глобально svg { fill: currentColor }; стрелка — один контур, заливка задана у path */
}

.case-before-after__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3.2rem 4.8rem;
  padding-top: 2.4rem;
}

.case-before-after__side--before .case-before-after__logos {
  padding-right: 16rem;
}

.case-before-after__logo {
  display: block;
  height: 3.6rem;
  width: auto;
}

@media only screen and (max-width: 640px) {
  .case-before-after {
    grid-template-columns: minmax(0, 1fr);
    grid-gap: 3.2rem;
    margin-bottom: 2rem;
  }

  .case-before-after__side {
    padding-top: 2.4rem;
    gap: 0.8rem;
  }

  .case-before-after__side--before .case-before-after__value-row,
  .case-before-after__side--before .case-before-after__logos {
    padding-right: 0;
  }

  .case-before-after__value {
    font-size: 9.6rem;
    letter-spacing: -0.38rem;
  }

  .case-before-after__arrow {
    width: 4.8rem;
    height: 4.8rem;
    transform: rotate(90deg);
  }

  .case-before-after__logos {
    gap: 1.6rem 2.4rem;
    padding-top: 1.6rem;
  }

  .case-before-after__logo {
    height: 2.4rem;
  }
}