@import url("./kfzc-common.css");

.rehab-page--yyzl {
  --rehab-blue: #004da4;
}

.rehab-role__lead {
  max-width: calc(620 * var(--design-unit));
  margin: 0 auto calc(26 * var(--design-unit));
  color: #4a5565;
  font-size: calc(17 * var(--design-unit));
  line-height: 1.75;
  text-align: center;
}

.rehab-role__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(16 * var(--design-unit)) calc(14 * var(--design-unit));
}

.rehab-role__card {
  overflow: hidden;
  border-radius: calc(4 * var(--design-unit));
  background: #fff;
  box-shadow: 0 calc(6 * var(--design-unit)) calc(18 * var(--design-unit)) rgba(29, 85, 150, .12);
}

.rehab-role__card img {
  display: block;
  width: 100%;
  aspect-ratio: 198 / 128;
  object-fit: cover;
}

.rehab-role__body {
  position: relative;
  margin-top: calc(-14 * var(--design-unit));
  padding: calc(22 * var(--design-unit)) calc(12 * var(--design-unit)) calc(16 * var(--design-unit));
  background: #fff;
  clip-path: polygon(0 16%, 100% 0, 100% 100%, 0 100%);
}

.rehab-role__body p {
  margin: 0;
  color: #333;
  font-size: calc(16 * var(--design-unit));
  line-height: 1.55;
  text-align: center;
}

@media (max-width: 375px) {
  .rehab-role__lead {
    margin-bottom: calc(20 * var(--design-unit));
    font-size: calc(16 * var(--design-unit));
    line-height: 1.7;
  }

  .rehab-role__cards {
    gap: calc(12 * var(--design-unit)) calc(10 * var(--design-unit));
  }

  .rehab-role__body {
    margin-top: calc(-12 * var(--design-unit));
    padding: calc(18 * var(--design-unit)) calc(10 * var(--design-unit)) calc(14 * var(--design-unit));
    clip-path: polygon(0 14%, 100% 0, 100% 100%, 0 100%);
  }

  .rehab-role__body p {
    font-size: calc(15 * var(--design-unit));
  }
}