.before-after h2.h3 {
  font-family: var(--font-secondary);
  text-align: center;
  font-weight: 500;
  margin-bottom: 30px;
}

.before-after__grid {
  --gap: 20px;
  --row-gap: 40px;
  --columns: var(--columns-mobile);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: var(--gap);
  row-gap: var(--row-gap);
}
@media (min-width: 576px) {
  .before-after__grid {
    --columns: var(--columns-tablet);
  }
}
@media (min-width: 992px) {
  .before-after__grid {
    --gap: 60px;
    --row-gap: 80px;
    --columns: var(--columns-desktop);
  }
}
.before-after__grid .before-after-card {
  width: calc(100% / var(--columns) - var(--gap) * (var(--columns) - 1) / var(--columns));
}

.before-after-card {
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
}
.before-after-card img {
  display: block;
}

.before-after-card__col {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  font-weight: bold;
  gap: 10px;
  text-align: center;
}