.main-width[data-v-1bbdf7f2]{height:400px;width:400px}ul[data-v-1bbdf7f2]{list-style:none;text-align:center;width:100%}li[data-v-1bbdf7f2]{display:inline-block}ul a[data-v-1bbdf7f2]{color:#000;float:left;height:400px;overflow:hidden;position:relative;text-decoration:none;width:100%}ul a img[data-v-1bbdf7f2]{padding:0 20px;--tw-grayscale:grayscale(100%);transition:filter .3s ease,padding .3s ease}ul a img[data-v-1bbdf7f2],ul a:hover img[data-v-1bbdf7f2]{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}ul a:hover img[data-v-1bbdf7f2]{--tw-grayscale:grayscale(0%)}ul a:focus strong[data-v-1bbdf7f2]{animation:down-1bbdf7f2 .3s ease forwards}b[data-v-1bbdf7f2]{cursor:pointer;display:block;height:400px;position:absolute;transform:rotate(45deg);width:100%;z-index:2}b[data-v-1bbdf7f2]:first-of-type{left:0;top:-75%}b[data-v-1bbdf7f2]:nth-of-type(2){bottom:-75%;left:0}b[data-v-1bbdf7f2]:nth-of-type(3){left:-75%;top:0}b[data-v-1bbdf7f2]:nth-of-type(4){right:-75%;top:0}b[data-v-1bbdf7f2]:hover{inset:0;transform:rotate(0);z-index:3}strong[data-v-1bbdf7f2]{background:#e2e8f031;display:table;opacity:0;position:absolute;top:0;transition:all .5s ease}strong[data-v-1bbdf7f2],strong span[data-v-1bbdf7f2]{height:100%;width:100%}strong span[data-v-1bbdf7f2]{align-items:center;color:#000;display:flex;justify-content:center}b:first-of-type:hover~strong[data-v-1bbdf7f2]{animation:down-1bbdf7f2 .3s ease forwards}@keyframes down-1bbdf7f2{0%{transform:translateY(-400px)}to{opacity:1;transform:translateY(0)}}b:nth-of-type(2):hover~strong[data-v-1bbdf7f2]{animation:up-1bbdf7f2 .3s ease forwards}@keyframes up-1bbdf7f2{0%{transform:translateY(400px)}to{opacity:1;transform:translateY(0)}}b:nth-of-type(3):hover~strong[data-v-1bbdf7f2]{animation:left-1bbdf7f2 .3s ease forwards;top:0}@keyframes left-1bbdf7f2{0%{transform:translate(-400px)}to{opacity:1;transform:translate(0)}}b:nth-of-type(4):hover~strong[data-v-1bbdf7f2]{animation:right-1bbdf7f2 .3s ease forwards;left:auto;right:0;top:0}@keyframes right-1bbdf7f2{0%{transform:translate(400px)}to{opacity:1;transform:translate(0)}}@media screen and (max-width:440px){.main-width[data-v-1bbdf7f2]{height:320px;width:320px}ul a[data-v-1bbdf7f2]{color:#000;float:left;overflow:hidden;position:relative;text-decoration:none}b[data-v-1bbdf7f2],ul a[data-v-1bbdf7f2]{height:320px;width:100%}b[data-v-1bbdf7f2]{cursor:pointer;display:block;transform:rotate(45deg);z-index:2}b[data-v-1bbdf7f2],strong[data-v-1bbdf7f2]{position:absolute}strong[data-v-1bbdf7f2]{background:#e2e8f031;display:table;height:100%;opacity:0;top:0;transition:all .5s ease;width:100%}}@media screen and (max-width:360px){.main-width[data-v-1bbdf7f2]{height:280px;width:280px}ul a[data-v-1bbdf7f2]{color:#000;float:left;overflow:hidden;position:relative;text-decoration:none}b[data-v-1bbdf7f2],ul a[data-v-1bbdf7f2]{height:280px;width:100%}b[data-v-1bbdf7f2]{cursor:pointer;display:block;transform:rotate(45deg);z-index:2}b[data-v-1bbdf7f2],strong[data-v-1bbdf7f2]{position:absolute}strong[data-v-1bbdf7f2]{background:#e2e8f031;display:table;height:280px;opacity:0;top:0;transition:all .5s ease;width:280px}}