main > .service-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 32px;
  padding-inline: max(32px, calc((100% - 976px) / 2)) 0;
  background: #fff;
}
.service-section > .section-heading {
  margin: 0;
  text-align: left;
}
.service-section > .section-heading h2 { font-size: 24px; }
.service-carousel {
  display: flex;
  gap: 40px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  padding: 8px 32px 24px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--blue) var(--blue-soft);
}
.service-carousel::-webkit-scrollbar { height: 6px; }
.service-carousel::-webkit-scrollbar-track { background: var(--blue-soft); border-radius: 999px; }
.service-carousel::-webkit-scrollbar-thumb { background: var(--blue); border-radius: 999px; }
.service-slide {
  text-align: left;
  position: relative;
  flex: 0 0 380px;
  min-width: 0;
  scroll-snap-align: start;
}
.service-slide > img {
  display: block;
  width: 100%;
  aspect-ratio: 12 / 7;
  object-fit: cover;
  object-position: center;
  background: #fff;
  border-radius: 8px;
}
.service-section .service-detail-link {
  justify-self: start;
  margin: 0;
  border-radius: 999px;
  border-color: #6fa9d8;
  color: #6fa9d8;
}
.service-slide h4 { margin: 24px 0 12px; font-size: 21px; font-weight: 500; }
.service-slide p { margin: 0; font-size: 15px; line-height: 1.9; }
.service-slide a { display: inline-flex; align-items: center; gap: 16px; margin-top: 20px; font-size: 14px; text-decoration: none; }
.service-slide a svg { width: 20px; height: 20px; }
.service-controls { grid-column: 2; display: flex; gap: 12px; padding-top: 24px; }
.service-controls button { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #8bb9b4; border-radius: 50%; background: #fff; color: #294b56; cursor: pointer; }
.service-controls button:disabled { opacity: .35; cursor: default; }
.service-controls button:not(:disabled):hover { background: #e1ece8; }
.service-controls svg { width: 20px; height: 20px; }
.service-carousel:focus-visible, .service-controls button:focus-visible { outline: 2px solid #294b56; outline-offset: 4px; }
@media (max-width: 767px) {
  main > .service-section { grid-template-columns: minmax(0, 1fr); padding-inline: 24px 0; }
  .service-section > .section-heading { margin-bottom: 24px; }
  .service-slide { flex-basis: min(380px, 80vw); }
  .service-controls { grid-column: 1; }
}