.hut-services { padding: 88px 0 72px; overflow: hidden; color: #000; }
.hut-services__heading { max-width: 800px; margin: 0 auto 48px; padding: 0 24px; text-align: center; font-size: clamp(28px, 3vw, 42px); line-height: 1.2; }
.hut-services__gallery { --card-width: 480px; --card-height: 360px; max-width: 1600px; margin: auto; }
.hut-services__stage { display: flex; gap: 24px; overflow-x: auto; padding: 16px 24px; scroll-snap-type: x mandatory; }
.hut-services__card { flex: 0 0 min(80vw, 480px); margin: 0; scroll-snap-align: center; }
.hut-services__image { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; user-select: none; }
.hut-services__caption { text-align: center; padding-top: 28px; }
.hut-services__caption h3 { margin: 0 0 12px; font-size: clamp(24px, 2vw, 30px); line-height: 1.2; color: #000; }
.hut-services__caption p { margin: 0 auto; max-width: 480px; font-size: 16px; line-height: 1.6; color: #555; }
.hut-services__caption a { display: inline-block; margin-top: 16px; color: #000; text-decoration: underline; text-underline-offset: 5px; }
.hut-services__controls { display: none; justify-content: center; align-items: center; gap: 24px; margin-top: 16px; }
.hut-services__controls button { width: 46px; height: 46px; border: 1px solid #aaa; border-radius: 50%; background: transparent; color: #000; cursor: pointer; font-size: 24px; }
.hut-services__controls button:hover { background: #dddddd40; }
.hut-services :focus-visible { outline: 2px solid #000; outline-offset: 5px; }
.hut-services__counter { min-width: 68px; text-align: center; font-size: 13px; letter-spacing: 2px; }
.hut-services__gallery.is-ready .hut-services__controls { display: flex; }
.hut-services__gallery.is-ready .hut-services__stage { position: relative; display: block; height: calc(var(--card-height) + 235px); overflow: hidden; padding: 16px 0 0; touch-action: pan-y; cursor: grab; }
.hut-services__gallery.is-ready .hut-services__card { position: absolute; top: 16px; left: 50%; width: var(--card-width); transform: translateX(calc(-50% + var(--shift))) scale(var(--scale)); transform-origin: center calc(var(--card-height) / 2); opacity: var(--fade); z-index: var(--layer); transition: transform 550ms cubic-bezier(.22,1,.36,1), opacity 400ms; }
.hut-services__gallery.is-ready .hut-services__caption { visibility: hidden; opacity: 0; transition: opacity 300ms; }
.hut-services__gallery.is-ready .is-current .hut-services__caption { visibility: visible; opacity: 1; }
.hut-services__gallery.is-ready .is-current .hut-services__image { outline: 1px solid #999; outline-offset: 8px; }
@media (min-width: 1440px) { .hut-services__gallery { --card-width: 560px; --card-height: 420px; } }
@media (min-width: 1024px) and (max-width: 1439px) { .hut-services__gallery { --card-width: 440px; --card-height: 330px; } }
@media (min-width: 768px) and (max-width: 1023px) { .hut-services { padding: 64px 0; } .hut-services__gallery { --card-width: 380px; --card-height: 285px; } }
@media (max-width: 767px) { .hut-services { padding: 48px 0; } .hut-services__heading { margin-bottom: 32px; } .hut-services__gallery { --card-width: 74vw; --card-height: 55.5vw; } .hut-services__caption { padding-top: 24px; } .hut-services__caption p { font-size: 15px; } .hut-services__gallery.is-ready .hut-services__stage { height: calc(var(--card-height) + 255px); } }
@media (max-width: 374px) { .hut-services__gallery.is-ready .hut-services__stage { height: calc(var(--card-height) + 290px); } }
@media (prefers-reduced-motion: reduce) { .hut-services__gallery.is-ready .hut-services__card, .hut-services__gallery.is-ready .hut-services__caption { transition: none; } }