.home-page .home-directions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: minmax(225px, 1fr) minmax(130px, .82fr) minmax(210px, 1fr);
  grid-template-areas:
    "therapy therapy orthodontics prosthetics"
    "therapy therapy implants implants"
    "surgery hygiene implants implants";
  gap: clamp(12px, 1.15vw, 20px);
  aspect-ratio: 1.84;
}

.home-direction-card {
  --surface: #edf4ef;
  display: grid;
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 0;
  padding: clamp(16px, 1.45vw, 26px);
  overflow: hidden;
  border: 1px solid rgb(24 61 60 / 7%);
  border-radius: clamp(20px, 1.9vw, 34px);
  background: var(--surface);
  color: #153637;
  text-decoration: none;
  transition: box-shadow .2s ease, border-color .2s ease;
}

.home-direction-card:hover {
  border-color: rgb(24 61 60 / 23%);
  box-shadow: 0 8px 26px rgb(24 61 60 / 9%);
}

.home-direction-card:focus-visible {
  outline: 3px solid #277a7d;
  outline-offset: 3px;
}

.home-direction-card--therapy {
  --surface: #e4f3e9;
  grid-area: therapy;
}

.home-direction-card--orthodontics {
  --surface: #dfeff1;
  --art-size: 621.65605% 801.25786%;
  --art-position: 67.15507% 36.14350%;
  --art-ratio: 314 / 159;
  --art-width: 70%;
  grid-area: orthodontics;
}

.home-direction-card--prosthetics {
  --surface: #f1eee5;
  --art-size: 519.14894% 753.84615%;
  --art-position: 94.54315% 35.38462%;
  --art-ratio: 376 / 169;
  --art-width: 90%;
  grid-area: prosthetics;
}

.home-direction-card--implants {
  --surface: #e5f3f6;
  grid-area: implants;
}

.home-direction-card--surgery {
  --surface: #eaf1ed;
  --art-size: 712.40876% 650%;
  --art-position: 14.00477% 92.76438%;
  --art-ratio: 274 / 196;
  --art-width: 67%;
  grid-area: surgery;
}

.home-direction-card--hygiene {
  --surface: #eef0df;
  --art-size: 650.66667% 653.33333%;
  --art-position: 39.89104% 92.77108%;
  --art-ratio: 300 / 195;
  --art-width: 71%;
  grid-area: hygiene;
}

.home-direction-card--photo {
  align-content: end;
  padding: clamp(22px, 2.05vw, 40px);
}

.home-direction-card--photo img,
.home-direction-card--photo::after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.home-direction-card--photo img {
  z-index: -2;
  object-fit: cover;
  object-position: center 32%;
}

.home-direction-card--photo::after {
  z-index: -1;
  content: "";
  background: linear-gradient(
    to top,
    var(--surface) 0%,
    var(--surface) 15%,
    color-mix(in srgb, var(--surface) 92%, transparent) 29%,
    color-mix(in srgb, var(--surface) 40%, transparent) 48%,
    transparent 64%
  );
}

.home-direction-card__art {
  position: absolute;
  right: 1.5%;
  bottom: 1.5%;
  z-index: -1;
  width: var(--art-width);
  aspect-ratio: var(--art-ratio);
  background-image: url("/assets/home/services-reference.webp");
  background-position: var(--art-position);
  background-size: var(--art-size);
  background-repeat: no-repeat;
  mask-image:
    linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),
    linear-gradient(to bottom, transparent, #000 12%, #000 89%, transparent);
  mask-composite: intersect;
}

.home-direction-card__body {
  position: relative;
  align-self: start;
}

.home-direction-card__category {
  margin: 0 0 5px;
  color: #416b65;
  font-size: clamp(13px, .96vw, 18px);
  font-weight: 600;
  line-height: 1.35;
}

.home-direction-card h3 {
  margin: 0 0 8px;
  font-size: clamp(21px, 1.69vw, 32px);
  font-weight: 650;
  letter-spacing: -.04em;
  line-height: 1.08;
}

.home-direction-card--therapy h3,
.home-direction-card--implants h3 {
  margin-bottom: 10px;
  font-size: clamp(32px, 3.45vw, 60px);
  letter-spacing: -.055em;
}

.home-direction-card__services {
  max-width: 46ch;
  margin: 0;
  color: #3b5f5e;
  font-size: clamp(13px, .94vw, 17px);
  line-height: 1.45;
}

.home-direction-card--therapy .home-direction-card__services,
.home-direction-card--implants .home-direction-card__services {
  max-width: 72ch;
  font-size: clamp(14px, 1.08vw, 18px);
}

@media (max-width: 1080px) {
  .home-page .home-directions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    grid-template-areas:
      "therapy therapy"
      "orthodontics prosthetics"
      "implants implants"
      "surgery hygiene";
    aspect-ratio: auto;
  }

  .home-direction-card {
    min-height: 260px;
  }

  .home-direction-card--therapy,
  .home-direction-card--implants {
    min-height: 340px;
  }

  .home-direction-card__art {
    max-width: 245px;
  }
}

@media (max-width: 560px) {
  .home-page .home-directions {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "therapy"
      "orthodontics"
      "prosthetics"
      "implants"
      "surgery"
      "hygiene";
  }

  .home-direction-card {
    min-height: 248px;
    padding: 19px;
  }

  .home-direction-card--orthodontics {
    min-height: 264px;
  }

  .home-direction-card--therapy,
  .home-direction-card--implants {
    min-height: 310px;
    padding: 22px;
  }

  .home-direction-card__art {
    width: min(var(--art-width), 195px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-direction-card {
    transition: none;
  }
}