.square-grid-hover{align-items:center;column-gap:35px;display:grid;grid-template-areas:"square1" "square2" "square3" "square4";grid-template-columns:1fr;justify-content:center;overflow:hidden;row-gap:35px}.square-container{aspect-ratio:540/510;height:100%;max-height:510px;max-width:540px;transition:all .5s;width:100%}.square{z-index:1}.centered-flex{align-items:center;display:flex;flex-direction:column;justify-content:center;text-align:center}.square:nth-child(8n+1){background-color:#fff;grid-area:square1;place-self:center}.square:nth-child(8n+3){background-color:#007ffa;grid-area:square2;place-self:center}.square:nth-child(8n+5){background-color:#00d2ce;grid-area:square3;place-self:center}.square:nth-child(8n+7){background-color:#fff;grid-area:square4;place-self:center}.square__title{font-family:Montserrat;font-weight:700}.square--active{aspect-ratio:540/510;display:none;overflow:hidden;transition:transform .5s;z-index:2}.square--active:nth-child(8n+2){transform:translateX(101%)}.square--active:nth-child(8n+4){transform:translateX(-101%)}.square--active:nth-child(8n),.square--active:nth-child(8n+6){transform:translateY(-101%)}.square--active--inner{aspect-ratio:540/510;display:flex;height:100%;transition:all .5s;width:100%}.square--active:nth-child(4) .square--active--inner{flex-direction:row-reverse}.square--active--inner__title{position:relative}.square--active:nth-child(2) .square--active--inner__title:before{border-right:4px solid #3afc2f;bottom:10%;content:"";position:absolute;top:10%;width:100%}.square--active:nth-child(4) .square--active--inner__title:before{border-left:4px solid #3afc2f;bottom:10%;content:"";position:absolute;top:10%;width:100%}.square--active:nth-child(6) .square--active--inner__title:before,.square--active:nth-child(8) .square--active--inner__title:before{border-bottom:4px solid #3afc2f;content:"";height:100%;left:10%;position:absolute;right:10%}.square--active:nth-child(6) .square--active--inner__title,.square--active:nth-child(8) .square--active--inner__title{justify-content:flex-end}.square--active:nth-child(8n+2) .square--active--inner{background-color:#fff}.square--active:nth-child(8n+4) .square--active--inner{background-color:#007ffa}.square--active:nth-child(8n+6) .square--active--inner{background-color:#00d2ce}.square--active:nth-child(8n) .square--active--inner{background-color:#fff}.square--active--inner__details{align-self:center;display:flex;flex-direction:column;font-family:Pluto Sans;justify-content:center;padding:2rem}@media screen and (min-width:900px){.square:nth-child(8n+1){place-self:end end}.square:nth-child(8n+3){place-self:end start}.square:nth-child(8n+5){place-self:start end}.square:nth-child(8n+7){place-self:start start}.square--active{display:block;visibility:hidden}.square-grid-hover{grid-template-areas:"square1 square2" "square3 square4";grid-template-columns:1fr 1fr}.square--active:nth-child(8n+2),.square--active:nth-child(8n+4){grid-area:square1/square1/square1/square2;height:100%;max-height:510px;max-width:1115px;place-self:end center;width:100%}.square--active:nth-child(8n+6){grid-area:square1/square1/square3/square3;height:100%;max-height:1060px;max-width:540px;place-self:start end;width:100%}.square--active:nth-child(8n){grid-area:square2/square2/square4/square4;height:100%;max-height:1060px;max-width:540px;place-self:start start;width:100%}.square--active:nth-child(8n+2) .square--active--inner{transform:translateX(-101%)}.square--active:nth-child(8n+4) .square--active--inner{transform:translateX(101%)}.square--active:nth-child(8n) .square--active--inner,.square--active:nth-child(8n+6) .square--active--inner{flex-direction:column;transform:translateY(101%)}.square--active:hover,.square--active:hover .square--active--inner,.square:hover+.square--active{transform:translateX(0) translateY(0);visibility:visible}}