/* Approved illustration board, cropped by CSS to retain the exact artwork.
   Source 1536 x 1024; six illustration windows 474 x 224. */
.services-grid .service-card {
    padding: 0 0 28px !important;
    overflow: hidden;
    border: 1px solid rgba(190, 153, 61, .32);
    background: var(--bg-card);
    border-radius: 16px;
}
.services-grid .service-card > h3,
.services-grid .service-card > p { margin-left: 28px; margin-right: 28px; }
.services-grid .service-card > h3 { margin-top: 18px; }
.services-grid .service-card > .service-list { margin-left: 28px; margin-right: 28px; }
.service-art {
    width: 100%;
    aspect-ratio: 474 / 224;
    background-image: url('../img/service-illustrations.png');
    background-size: 324.050633% auto;
    background-repeat: no-repeat;
    background-position: var(--art-x) var(--art-y);
    position: relative;
}
.service-art::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to bottom, transparent 80%, var(--bg-card));
}
.service-art-1 { --art-x: 2.82486%; --art-y: 3.875%; }
.service-art-2 { --art-x: 50.09416%; --art-y: 3.875%; }
.service-art-3 { --art-x: 97.36347%; --art-y: 3.875%; }
.service-art-4 { --art-x: 2.82486%; --art-y: 66.5%; }
.service-art-5 { --art-x: 50.09416%; --art-y: 66.5%; }
.service-art-6 { --art-x: 97.36347%; --art-y: 66.5%; }
[data-theme="dark"] .service-art { filter: brightness(.78) saturate(.82); }
@media (max-width: 600px) {
    .services-grid .service-card > h3,
    .services-grid .service-card > p,
    .services-grid .service-card > .service-list { margin-left: 22px; margin-right: 22px; }
}

/* Long service grids must remain visible in short and mobile viewports. */
#services > .container.reveal { opacity: 1; transform: none; }