/* The featured tile spans the same three rows as the six tiles beside it. */
.section:has(.service-grid) {
  background: #fff;
}

.section:has(.service-grid) .section-title {
  margin-bottom: 42px;
  font-size: 48px;
}

.service-grid {
  grid-template-columns: 2fr 1fr 1fr;
  grid-auto-rows: calc((600px - 16px) / 3);
}

.service-card {
  position: relative;
  height: auto;
  overflow: hidden;
  padding: 0;
  color: #fff;
  background: #262b29;
  font: 24px DMSerif;
}

.service-card:first-child {
  height: auto;
  grid-row: span 3;
  background: #262b29;
}

.service-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}

.service-card::after {
  position: absolute;
  inset: 0;
  content: '';
  background: linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 50%) 100%);
}

.service-card span {
  position: absolute;
  right: 16px;
  bottom: 14px;
  left: 16px;
  z-index: 1;
  line-height: 1.1;
}

.service-card:hover img {
  transform: scale(1.04);
}

@media (max-width: 800px) {
  .service-grid { grid-template-columns: 1fr; grid-auto-rows: 280px; }
  .service-card:first-child { height: auto; grid-column: auto; grid-row: auto; }
  .service-card .service-card__default-title { font-size: 20px; }
}