:root{--color-bg-red: #e60012;--color-bg-white: #ffffff;--color-text-white: #ffffff;--color-text-black: #000000}.grid-interaction{min-height:180svh;transform:translateZ(0);will-change:transform}.grid-items-wrapper{display:grid;grid-template-columns:1fr 1fr 2fr;transition:grid-template-columns .5s ease;height:100%;min-height:calc(100svh - 60px);position:sticky;top:var(--header-height)}.grid-interaction .item{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;overflow:hidden;position:relative;padding:6.4rem;background-repeat:no-repeat;background-position:center center;background-size:cover;transition:padding .5s ease;background-color:#ccc}.grid-interaction .item:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-color:#464646b3;z-index:1;transition:background-color .5s ease;pointer-events:none}.grid-items-wrapper:not(:has(.item:hover)) .item:nth-child(3):before{background-color:#46464600}.grid-items-wrapper:has(.item:nth-child(1):hover) .item:nth-child(1):before,.grid-items-wrapper:has(.item:nth-child(2):hover) .item:nth-child(2):before,.grid-items-wrapper:has(.item:nth-child(3):hover) .item:nth-child(3):before{background-color:#46464600}.grid-interaction .item-content{position:relative;z-index:2;display:flex;flex-direction:column;gap:3.2rem;width:100%;min-height:304px}.grid-interaction .item h2{margin:0;font-size:2.8rem;font-weight:700;line-height:1.2;color:var(--color-text-white);transition:all .4s ease;max-width:370px}.grid-interaction .item .des{margin:0;padding:0;opacity:1;transform:translateY(0);transition:opacity .5s ease,transform .5s ease}.grid-interaction .item .des p{font-size:1.6rem;color:var(--color-text-white);line-height:inherit;margin:0;margin-bottom:1.6rem;opacity:1;transform:translateY(0);transition:opacity .4s ease,transform .4s ease}.grid-interaction .item .btn{padding:1.2rem 3.2rem;background:var(--color-bg-white);color:var(--color-text-black);font-size:1.6rem;transition:all .5s ease;opacity:1;transform:translateY(0);max-width:178px;text-transform:uppercase;display:flex;justify-content:center;align-items:center;text-decoration:none}.grid-interaction .item .btn:hover{background:var(--color-bg-red);color:var(--color-text-white)}.grid-items-wrapper:not(:has(.item:hover)) .item:nth-child(1) .des,.grid-items-wrapper:not(:has(.item:hover)) .item:nth-child(1) .btn,.grid-items-wrapper:not(:has(.item:hover)) .item:nth-child(2) .des,.grid-items-wrapper:not(:has(.item:hover)) .item:nth-child(2) .btn{opacity:0;transform:translateY(200px);pointer-events:none}.grid-items-wrapper:has(.item:nth-child(1):hover) .item:nth-child(2) .des,.grid-items-wrapper:has(.item:nth-child(1):hover) .item:nth-child(2) .btn,.grid-items-wrapper:has(.item:nth-child(1):hover) .item:nth-child(3) .des,.grid-items-wrapper:has(.item:nth-child(1):hover) .item:nth-child(3) .btn,.grid-items-wrapper:has(.item:nth-child(2):hover) .item:nth-child(1) .des,.grid-items-wrapper:has(.item:nth-child(2):hover) .item:nth-child(1) .btn,.grid-items-wrapper:has(.item:nth-child(2):hover) .item:nth-child(3) .des,.grid-items-wrapper:has(.item:nth-child(2):hover) .item:nth-child(3) .btn,.grid-items-wrapper:has(.item:nth-child(3):hover) .item:nth-child(1) .des,.grid-items-wrapper:has(.item:nth-child(3):hover) .item:nth-child(1) .btn,.grid-items-wrapper:has(.item:nth-child(3):hover) .item:nth-child(2) .des,.grid-items-wrapper:has(.item:nth-child(3):hover) .item:nth-child(2) .btn{opacity:0;transform:translateY(200px);pointer-events:none}.grid-items-wrapper:has(.item:nth-child(1):hover){grid-template-columns:2fr 1fr 1fr}.grid-items-wrapper:has(.item:nth-child(2):hover){grid-template-columns:1fr 2fr 1fr}.grid-items-wrapper:has(.item:nth-child(3):hover){grid-template-columns:1fr 1fr 2fr}@media(max-width:989px){.grid-interaction{min-height:fit-content;transform:none;will-change:auto}.grid-items-wrapper{transition:none;height:100%;min-height:fit-content;position:relative;top:0;gap:1.2rem;grid-template-rows:1fr;grid-template-columns:1fr}.grid-items-wrapper:has(.item:nth-child(1):hover){grid-template-rows:1fr;grid-template-columns:1fr}.grid-items-wrapper:has(.item:nth-child(2):hover){grid-template-rows:1fr;grid-template-columns:1fr}.grid-items-wrapper:has(.item:nth-child(3):hover){grid-template-rows:1fr;grid-template-columns:1fr}.grid-interaction .item{padding:4rem;transition:none;max-height:330px}.grid-interaction .item:before{background-color:#46464666;transition:none;pointer-events:none}.grid-items-wrapper:not(:has(.item:hover)) .item:nth-child(3):before{background-color:#46464666}.grid-items-wrapper:has(.item:nth-child(1):hover) .item:nth-child(1):before,.grid-items-wrapper:has(.item:nth-child(2):hover) .item:nth-child(2):before,.grid-items-wrapper:has(.item:nth-child(3):hover) .item:nth-child(3):before{background-color:#46464666}.grid-interaction .item-content{justify-content:center;gap:1.2rem;min-height:330px}.grid-interaction .item h2{font-size:1.6rem}.grid-interaction .item .des{opacity:1;transform:none;transition:none}.grid-interaction .item .des p{font-size:1.2rem;margin-bottom:0}.grid-interaction .item .btn{margin-top:1.2rem;padding:1rem;font-size:1.2rem;max-width:150px}.grid-items-wrapper:not(:has(.item:hover)) .item:nth-child(1) .des,.grid-items-wrapper:not(:has(.item:hover)) .item:nth-child(1) .btn,.grid-items-wrapper:not(:has(.item:hover)) .item:nth-child(2) .des,.grid-items-wrapper:not(:has(.item:hover)) .item:nth-child(2) .btn{opacity:1;transform:none;pointer-events:auto}.grid-items-wrapper:has(.item:nth-child(1):hover) .item:nth-child(2) .des,.grid-items-wrapper:has(.item:nth-child(1):hover) .item:nth-child(2) .btn,.grid-items-wrapper:has(.item:nth-child(1):hover) .item:nth-child(3) .des,.grid-items-wrapper:has(.item:nth-child(1):hover) .item:nth-child(3) .btn,.grid-items-wrapper:has(.item:nth-child(2):hover) .item:nth-child(1) .des,.grid-items-wrapper:has(.item:nth-child(2):hover) .item:nth-child(1) .btn,.grid-items-wrapper:has(.item:nth-child(2):hover) .item:nth-child(3) .des,.grid-items-wrapper:has(.item:nth-child(2):hover) .item:nth-child(3) .btn,.grid-items-wrapper:has(.item:nth-child(3):hover) .item:nth-child(1) .des,.grid-items-wrapper:has(.item:nth-child(3):hover) .item:nth-child(1) .btn,.grid-items-wrapper:has(.item:nth-child(3):hover) .item:nth-child(2) .des,.grid-items-wrapper:has(.item:nth-child(3):hover) .item:nth-child(2) .btn{opacity:1;transform:none;pointer-events:auto}}
/*# sourceMappingURL=/cdn/shop/t/10/assets/grid-interaction.css.map */