.container{display:grid;grid-template-columns:1fr;gap:1em;height:auto;transition:all .4s;padding:0 4%;margin-top:8%}@media (min-width:640px){.container{grid-template-columns:1fr 1fr;gap:1.2em;padding:0 3%;margin-top:6%}}@media (min-width:1024px){.container{grid-template-columns:1fr 1fr 1fr;gap:1.5em;padding:0 2%;margin-top:8%}}@media (min-width:1280px){.container{grid-template-columns:1fr 1fr 1fr 1fr 1fr;gap:1em;height:50%;padding-left:2%;padding-right:2%;margin-top:10%}}.box{position:relative;overflow:hidden;border-radius:20px;height:300px;justify-content:center;border:2px solid #0073ae;box-shadow:0 0 10px #0073AE}@media (min-width:640px){.box{height:320px;border-radius:25px}}@media (min-width:1024px){.box{height:350px;border-radius:30px}}@media (min-width:1280px){.box{height:38vh;border-radius:30px}}.box:hover{filter:grayscale(0) opacity(100%);box-shadow:0 0 20px #00bfff,0 0 30px #00bfff}.box-inner{height:100%;transition:transform .4s ease}.box-desc{position:absolute;bottom:8px;left:8px;right:8px;background-color:rgba(0,13,19,.9);font-size:.75rem;line-height:1.1rem;padding:.5rem;border-radius:8px;transform:translateY(20px)}@media (min-width:640px){.box-desc{font-size:.8rem;line-height:1.2rem;padding:.6rem;border-radius:10px;bottom:10px;left:10px;right:10px}}@media (min-width:1024px){.box-desc{font-size:.85rem;line-height:1.25rem;padding:.75rem;border-radius:10px}}.box:has(~.box:hover),.box:hover~.box{filter:grayscale(100%) opacity(24%)}@media (min-width:1024px){.box:nth-child(odd){transform:translateY(-16px)}.box:nth-child(2n){transform:translateY(16px)}}@media (min-width:1280px){.container:has(.box-1:hover){grid-template-columns:3fr 1fr 1fr 1fr 1fr}.container:has(.box-2:hover){grid-template-columns:1fr 3fr 1fr 1fr 1fr}.container:has(.box-3:hover){grid-template-columns:1fr 1fr 3fr 1fr 1fr}.container:has(.box-4:hover){grid-template-columns:1fr 1fr 1fr 3fr 1fr}.container:has(.box-5:hover){grid-template-columns:1fr 1fr 1fr 1fr 3fr}}.box:hover:after{transform:translateY(0);opacity:1;transition-delay:.3s}.box-desc{line-height:1.25rem;max-width:95%}.box{display:flex;flex-direction:column;align-items:center;transition:filter .4s ease,box-shadow .4s ease}.box-inner{width:100%;height:300px;background-position:50%;background-size:cover;border-radius:20px;border:2px solid #0073ae;box-shadow:0 0 10px #0073AE;transition:transform .4s ease,box-shadow .4s ease}@media (min-width:640px){.box-inner{height:320px;border-radius:25px}}@media (min-width:1024px){.box-inner{height:350px;border-radius:30px}}@media (min-width:1280px){.box-inner{height:38vh;border-radius:30px}}.box:hover .box-inner{transform:scale(1.1);box-shadow:0 0 25px #00bfff,0 0 35px #00bfff}.box-desc{margin-top:.75rem;padding:.75rem 1rem;background-color:rgba(0,13,19,.92);border:1px solid #0073ae;box-shadow:0 0 10px #0073AE;color:white;font-size:.85rem;line-height:1.3rem;border-radius:10px;max-width:90%;opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .4s ease;pointer-events:none;text-align:center}.box:hover .box-desc{opacity:1;transform:translateY(0);pointer-events:auto}@property --rotate{syntax:"<angle>";initial-value:132deg;inherits:false}:root{--card-height:65vh;--card-width:calc(var(--card-height) / 1.5)}#card{background:#191c29;width:70%;height:auto;padding:2vw;position:relative;border-radius:30px;justify-content:center;align-items:center;text-align:center;font-size:1.5em;color:rgb(88 199 250/0);cursor:pointer;font-family:cursive;margin:0 auto}#card:before{width:104%;height:106%;border-radius:30px;top:-3%;left:-2%}#card:after,#card:before{content:"";background-image:linear-gradient(var(--rotate),#5ddcff,#3c67e3 43%,#4e00c2);position:absolute;z-index:-1;animation:spin 2.5s linear infinite}#card:after{top:calc(var(--card-height) / 5);left:0;right:0;height:100%;width:100%;margin:0 auto;transform:scale(.8);filter:blur(calc(var(--card-height) / 6));opacity:1;transition:opacity .5s}@keyframes spin{0%{--rotate:0deg}to{--rotate:360deg}}