gryd-carousel{display:block;min-width:0;width:100%;--gryd-red:#c82025}
.gryd-carousel__track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 36px)/4);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.gryd-carousel__track::-webkit-scrollbar{display:none}
.gryd-carousel__track>.resource-list__item{min-width:0;scroll-snap-align:start}
.gryd-carousel__track:focus-visible{outline:2px solid var(--gryd-red);outline-offset:5px}
.gryd-carousel__progress{height:3px;margin-top:20px;background:#deddd9;overflow:hidden;border-radius:2px}
.gryd-carousel__progress span{display:block;height:100%;width:var(--gryd-thumb-width,80%);transform:translateX(var(--gryd-thumb-offset,0%));background:var(--gryd-red);border-radius:2px}
.gryd-carousel__controls{display:flex;flex-shrink:0;align-items:center;gap:4px}
.gryd-carousel__controls[hidden],.gryd-carousel__progress[hidden]{display:none}
.gryd-carousel__controls button{display:grid;place-items:center;width:44px;height:44px;padding:0;color:#111;background:transparent;border:0;cursor:pointer;transition:color .15s}
.gryd-carousel__controls button:hover{color:var(--gryd-red)}
.gryd-carousel__controls button:disabled{opacity:.25;cursor:default}
.gryd-carousel__controls button:focus-visible{outline:2px solid var(--gryd-red);outline-offset:-3px}
.section-resource-list__header:has(.gryd-carousel__controls),.section-resource-list__content:has(>.gryd-carousel__controls){display:flex;align-items:center;justify-content:space-between;gap:16px}
.section-resource-list__header:has(.gryd-carousel__controls)>:first-child,.section-resource-list__content:has(>.gryd-carousel__controls)>:first-child{flex:1;min-width:0}
@media(max-width:749px){.gryd-carousel__track{grid-auto-columns:calc((100% - 12px)/2)}.gryd-carousel__progress{margin-top:16px}.gryd-carousel__controls{gap:0}.gryd-carousel__controls button{width:36px;height:44px}.section-resource-list__header:has(.gryd-carousel__controls){flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.gryd-carousel__controls button{transition:none}}
.section-resource-list__header:has(.gryd-carousel__controls) .group-block-content{align-items:center;--vertical-alignment:center!important;--vertical-alignment-mobile:center!important}
.section-resource-list__header:has(.gryd-carousel__controls) .group-block-content>.link{display:inline-flex;align-items:center;align-self:center;min-height:44px;line-height:1.2;margin-block:0}
.section-resource-list__content:has(>.gryd-carousel__controls){flex-direction:row!important;align-items:center!important}

@media(max-width:749px){
.section-resource-list__header:has(.gryd-carousel__controls){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:8px;row-gap:8px}
.section-resource-list__header:has(.gryd-carousel__controls)>.group-block,.section-resource-list__header:has(.gryd-carousel__controls)>.group-block>.group-block-content{display:contents!important}
.section-resource-list__header:has(.gryd-carousel__controls)>.group-block>.group-block__media-wrapper{display:none}
.section-resource-list__header:has(.gryd-carousel__controls) .group-block-content>.text-block{grid-column:1/-1;grid-row:1}
.section-resource-list__header:has(.gryd-carousel__controls) .group-block-content>.link{grid-column:1;grid-row:2;justify-self:end;min-height:36px;max-width:100%;font-size:12px;line-height:1.2;white-space:nowrap}
.section-resource-list__header:has(.gryd-carousel__controls)>.gryd-carousel__controls{grid-column:2;grid-row:2;align-self:center;gap:0}
.section-resource-list__header .gryd-carousel__controls button{width:32px;height:36px}
.section-resource-list__header .gryd-carousel__controls svg{width:17px;height:17px}
.section-resource-list__header:has(>.gryd-carousel__controls[hidden]){grid-template-columns:1fr}
}

@media(max-width:749px){
[data-testid="product-list"].section-resource-list{gap:10px!important}
.section-resource-list__header:has(.gryd-carousel__controls){row-gap:2px!important;column-gap:4px!important}
.section-resource-list__header:has(.gryd-carousel__controls) a.link{font-size:11px!important;font-weight:400;line-height:1.15!important;width:max-content!important;max-width:100%;margin-left:auto!important;margin-right:0!important;padding:0!important;text-align:right!important;justify-self:end!important;justify-content:flex-end;min-height:28px!important}
.section-resource-list__header .gryd-carousel__controls button{width:28px;height:28px}
.section-resource-list__header .gryd-carousel__controls svg{width:15px;height:15px}
}

.gryd-carousel__progress{position:relative;height:20px;margin-top:10px;overflow:visible;background:transparent;cursor:grab;touch-action:none;user-select:none}
.gryd-carousel__progress::before{content:"";position:absolute;left:0;right:0;top:8px;height:3px;border-radius:2px;background:#deddd9}
.gryd-carousel__progress span{position:absolute;left:0;top:8px;height:3px;pointer-events:none}
.gryd-carousel__progress.is-dragging{cursor:grabbing}
.gryd-carousel__progress:focus-visible{outline:2px solid #c82025;outline-offset:3px}
@media(max-width:749px){.gryd-carousel__progress{margin-top:6px}}
