.services { position: relative; overflow: clip; padding-block: 0; background: radial-gradient(ellipse at 14% 33%, var(--color-services-glow) 0, transparent 56%), var(--color-services-background); color: var(--color-on-accent); --color-focus: var(--color-focus-inverse); }
.services__layout { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 27.5rem; gap: var(--space-10); min-block-size: 60.6875rem; }
.services__content { padding-block: var(--space-16) 9.125rem; }
.services__offerings { position: relative; display: grid; margin-block-start: 14.5rem; }
.services__orbit { position: absolute; inline-size: 62.25rem; inset-inline-start: -20.75rem; inset-block-start: -4.125rem; opacity: 0.85; }
.services__gallery { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-10); position: absolute; inset-block: 0; inset-inline-end: 5.6875rem; inline-size: 27.5rem; }
.services__pause { position: absolute; inset-inline-end: 0; inset-block-end: var(--space-4); opacity: 0; }
.services__gallery:hover .services__pause, .services__pause:focus-visible { opacity: 1; }
@media (width < 75rem) {
    .services__layout { grid-template-columns: minmax(0, 1fr) 20rem; min-block-size: 52rem; gap: var(--space-8); }
    .services__gallery { inline-size: 20rem; inset-inline-end: var(--container-gutter); gap: var(--space-6); }
    .services__offerings { margin-block-start: var(--space-20); }
}
@media (width < 48rem) {
    .services__layout { display: block; min-block-size: 0; }
    .services__content { padding-block: var(--space-12); }
    .services__offerings { margin-block-start: var(--space-16); }
    .services__orbit { inline-size: 42rem; inset-block-start: -3rem; inset-inline-start: -20rem; }
    .services__gallery { position: relative; inset: auto; inline-size: 100%; block-size: 28rem; gap: var(--space-4); }
}