.benefits {
  position: relative;
  padding: calc(101.8 * var(--u)) var(--gutter) calc(29.9 * var(--u));
}

.benefits__eyebrow {
  font-size: calc(16.7 * var(--u));
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--c-teal);
}

.benefits__title {
  margin-top: calc(22.4 * var(--u));
  font-size: calc(29.9 * var(--u));
  line-height: calc(36.65 * var(--u));
  letter-spacing: 0;
}

.benefits__text {
  margin-top: calc(28.4 * var(--u));
  font-size: calc(16.3 * var(--u));
  font-weight: 600;
  line-height: calc(25.85 * var(--u));
  white-space: nowrap;
}

.benefits__btn {
  margin-top: calc(16.85 * var(--u));
  margin-left: calc(1.4 * var(--u));
}

.benefits__cards {
  position: absolute;
  top: calc(125.2 * var(--u));
  right: calc(59.3 * var(--u));
  display: flex;
  gap: calc(17.9 * var(--u));
}

.benefit-card {
  position: relative;
  width: calc(var(--w) * var(--u));
  height: calc(289 * var(--u));
  padding-top: calc(43.1 * var(--u));
  text-align: center;
  background: var(--c-white);
  border: calc(2 * var(--u)) solid #e6e6e6;
  border-radius: calc(8 * var(--u));
  transition:
    border-color var(--transition),
    box-shadow var(--transition);
}

.benefit-card:hover {
  border-color: var(--c-teal);
  box-shadow: var(--shadow-card);
}

.benefit-card__link {
  position: absolute;
  inset: calc(-2 * var(--u));
  z-index: 1;
  border-radius: inherit;
}

.benefit-card__link:focus-visible {
  outline-offset: 2px;
}

.benefit-card:has(.benefit-card__link:focus-visible) {
  border-color: var(--c-teal);
}

.benefit-card--property {
  --w: 193.2;
  --iy: 202.5;
  --iw: 62.4;
}
.benefit-card--land {
  --w: 193.3;
  --iy: 193.3;
  --iw: 61.3;
}
.benefit-card--import {
  --w: 193.3;
  --iy: 190.6;
  --iw: 63.3;
}
.benefit-card--vat {
  --w: 218.5;
  --iy: 200.9;
  --iw: 62.5;
}

.benefit-card__value {
  font-size: calc(57.8 * var(--u));
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--c-green);
}

.benefit-card__value span {
  font-size: calc(41.4 * var(--u));
}

.benefit-card__value--teal {
  color: var(--c-teal);
}

.benefit-card__value--teal span {
  font-size: calc(24.9 * var(--u));
}

.benefit-card__label {
  margin-top: calc(14 * var(--u));
  font-size: calc(16.3 * var(--u));
  font-weight: 600;
  line-height: calc(25.9 * var(--u));
  color: var(--c-muted);
  white-space: nowrap;
}

.benefit-card__icon {
  position: absolute;
  left: 50%;
  top: calc(var(--iy) * var(--u));
  width: calc(var(--iw) * var(--u));
  transform: translateX(-50%);
}

@media (max-width: 900px) {
  .benefits {
    padding: var(--sp-8) var(--gutter) var(--section-y);
  }

  .benefits__eyebrow {
    font-size: 15px;
  }

  .benefits__title {
    margin-top: var(--sp-4);
    font-size: 26px;
    line-height: 1.25;
  }

  .benefits__text {
    margin-top: var(--sp-4);
    font-size: 15px;
    line-height: 1.6;
    white-space: normal;
  }

  .benefits__btn {
    margin: var(--sp-6) 0 0;
  }

  .benefits__cards {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
    margin-top: var(--sp-7);
  }

  .benefit-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    height: auto;
    padding: var(--sp-6) var(--sp-3) var(--sp-5);
    border-width: 2px;
    border-radius: var(--radius);
  }

  .benefit-card__value {
    font-size: 44px;
  }

  .benefit-card__value span {
    font-size: 31px;
  }

  .benefit-card__value--teal span {
    font-size: 19px;
  }

  .benefit-card__label {
    margin-top: var(--sp-2);
    font-size: 14px;
    line-height: 1.5;
    white-space: normal;
  }

  .benefit-card__icon {
    position: static;
    width: 48px;
    margin-top: var(--sp-4);
    transform: none;
  }
}