.strix-grid{display:grid;gap:var(--grid-mobile-vertical-spacing) var(--grid-mobile-horizontal-spacing)}@media(min-width:768px){.strix-grid{gap:var(--grid-desktop-vertical-spacing) var(--grid-desktop-horizontal-spacing)}}.grid-cols-reverse div:nth-child(1){grid-row:2}@media(min-width:768px){.grid-cols-reverse div:nth-child(1){grid-row:auto}}.grid-cols-1,.grid-cols-2{grid-template-columns:1fr}@media(min-width:768px){.grid-cols-2{grid-template-columns:1fr 1fr}}.grid-cols-4-3{grid-template-columns:1fr}@media(min-width:768px){.grid-cols-4-3{grid-template-columns:.67fr .33fr}}.grid-cols-3-4{grid-template-columns:1fr}@media(min-width:768px){.grid-cols-3-4{grid-template-columns:.33fr .67fr}}@media(min-width:768px){.md-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.md-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}.strix-hotspot-content{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;position:absolute;z-index:2;border-radius:.5rem;background-color:rgb(var(--color-background));opacity:0;transition:all .3s;width:max-content}.strix-hotspot-content.is--off-image{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;transition-timing-function:cubic-bezier(.4,0,.2,1);--strix-translate-x: 0;--strix-translate-y: 0;--strix-rotate: 0;--strix-skew-x: 0;--strix-skew-y: 0;--strix-scale-x: 1;--strix-scale-y: 1;transform:translate(var(--strix-translate-x)) translateY(var(--strix-translate-y)) rotate(var(--strix-rotate)) skew(var(--strix-skew-x)) skewY(var(--strix-skew-y)) scaleX(var(--strix-scale-x)) scaleY(var(--strix-scale-y));transition:all .3s;top:0;width:100%;padding:36px}.strix-hotspots__wrapper.is--right .strix-hotspot-content.is--off-image:not(.is--active){--strix-translate-x: 100%;--strix-translate-y: 0;right:0;left:auto}.strix-hotspot-content.is--off-image.is--active{--strix-translate-x: 0;opacity:1;height:100%}.strix-hotspot-content.is--on-image{--strix-translate-x: 0;--strix-translate-y: 0;--strix-rotate: 0;--strix-skew-x: 0;--strix-skew-y: 0;--strix-scale-x: 1;--strix-scale-y: 1;transform:translate(var(--strix-translate-x)) translateY(var(--strix-translate-y)) rotate(var(--strix-rotate)) skew(var(--strix-skew-x)) skewY(var(--strix-skew-y)) scaleX(var(--strix-scale-x)) scaleY(var(--strix-scale-y));--strix-translate-y: -40%;display:none;top:0;left:0;padding:1rem;transition:all .2s;z-index:2;width:max-content}.strix-hotspot-content.is--on-image .strix-btn{top:0;right:0}.strix-hotspot-content.is--on-image.is--right{--strix-translate-x: 15%}.strix-hotspot-content.is--on-image:not(.is--right){--strix-translate-x: -105%}@media(min-width:768px){.strix-hotspot-content.is--on-image{display:block;opacity:0}}.strix-hotspot-content.is--on-image.is--active{display:block;bottom:5px;opacity:1}@media(min-width:768px){.strix-hotspot-content.is--on-image.is--active{bottom:auto}}.strix-hotspot-content__wrapper.is--right .strix-hotspot-content.is--on-image{--strix-translate-x: 10%;--strix-translate-y: -50%}.strix-hotspot__content-close-btn{-webkit-appearance:button;background-color:transparent;background-image:none;border:none;padding:0;cursor:pointer;position:absolute;top:1rem;right:1rem;color:#000}.strix-hotspot__content-close-btn svg{display:block;width:20px;height:20px}.strix-hotspot__content-close-btn svg path{stroke:rgb(var(--color-foreground))}.strix-hotspot-content__wrapper{display:flex;flex-direction:column;gap:2.5rem;padding:1.5rem .75rem}.strix-hotspot-content__wrapper.is--on-image img{max-height:100px;width:auto;object-fit:contain}.strix-offcanvas .strix-hotspot-content__wrapper{width:100%;max-width:none;align-items:baseline;padding:36px 16px}.strix-offcanvas .strix-hotspot-content__wrapper img{max-height:200px;object-fit:contain}.strix-hotspot-content__content-wrapper{display:flex}.button.strix-hotspot-content__button{margin-top:24px;width:100%}@media(min-width:768px){.button.strix-hotspot-content__button{display:none}}.strix-hotspot-content__text{display:flex;align-items:center}.strix-hotspot-content__text .h2{margin-top:0}.strix-hotspot-content__text .h2:not(:last-child){margin-bottom:12px}.strix-hotspot-content__text .button.strix-hotspot-content__button{display:none}@media(min-width:768px){.strix-hotspot-content__text .button.strix-hotspot-content__button{display:inline-flex;width:fit-content}}.strix-hotspot-content__image{align-self:start}.strix-hotspot-content__image img{max-height:300px;object-fit:contain}
/*# sourceMappingURL=/cdn/shop/t/2/assets/strix-hotspot-content.css.map */