.ds-videos__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--spacing-4);width:100%}@media screen and (min-width: 700px){.ds-videos__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--spacing-6)}}@media screen and (min-width: 1000px){.ds-videos__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--spacing-8)}}.ds-videos__item{display:flex;flex-direction:column;gap:var(--spacing-2);margin-bottom:var(--spacing-4)}.ds-videos__media-wrapper{position:relative;width:100%;border-radius:var(--rounded);background-color:var(--secondary-background);overflow:hidden;box-shadow:0 4px 6px #0000000d}.ds-videos__media-wrapper:hover{box-shadow:0 6px 12px #0000001a}.ds-videos__video{border-radius:var(--rounded);width:100%;display:block}.ds-videos__video img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:2;border-radius:var(--rounded);transition:opacity .3s ease}.ds-videos__video[playing] img{opacity:0;pointer-events:none}.ds-videos__video::part(play-button){opacity:.9;z-index:3}.ds-videos__video:hover::part(play-button){opacity:1}.ds-videos__video[playing]::part(play-button){opacity:0;pointer-events:none}.ds-videos__video:not([playing])::part(play-button){opacity:.9;pointer-events:auto}.ds-videos__video-element{width:100%;height:100%;border-radius:var(--rounded);object-fit:cover}.ds-videos__video-element::-webkit-media-controls{background-color:#00000080;border-radius:0 0 var(--rounded) var(--rounded)}.ds-videos__video:not([playing]):before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(var(--video-overlay));pointer-events:none;z-index:1;border-radius:var(--rounded)}.ds-videos__item-title{font-weight:700;margin-top:var(--spacing-3);margin-bottom:var(--spacing-1);font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:.02em;line-height:1.3}.ds-videos__item-content{font-size:var(--font-size-xs);line-height:1.5;color:var(--text-color);margin-top:var(--spacing-1)}@media screen and (min-width: 700px){.ds-videos__item-title{font-size:var(--font-size-base)}.ds-videos__item-content{font-size:var(--font-size-sm)}}@media screen and (min-width: 1000px){.ds-videos__item-title{font-size:var(--font-size-md)}.ds-videos__item-content{font-size:var(--font-size-base)}}
/*# sourceMappingURL=/cdn/shop/t/32/assets/component-ds-videos.css.map */