*,*:before,*:after{padding:0;margin:0;box-sizing:border-box}a{display:inline-block;width:fit-content;color:inherit;text-decoration:none}ul{list-style:none}button,label,input,textarea{display:inline-block;width:fit-content;background-color:inherit;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;border:0;outline:0}textarea{resize:none}button{cursor:pointer}img{max-width:100%}p{line-height:1.5}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}body{background:#2c2c2c;overflow-x:hidden}.container{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2rem;width:min(95%,750px);min-height:100vh;margin:0 auto;padding:3rem 0;text-align:center;color:#fff;font-family:Arial,sans-serif}.container__title{text-transform:capitalize}.cards-box{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;perspective:6000px;perspective-origin:50% 50%}.card{display:block;width:100%;height:150px;position:relative;transform-style:preserve-3d;transition:.6s;color:#fff}.card.flipped{transform:rotateY(180deg)}.card-side{position:absolute;top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:12px;box-shadow:0 6px 18px #0000001a;overflow:hidden;transform-origin:50% 50%}.card-front{background:#007acc;display:flex;justify-content:center;align-items:center;font-size:3rem;font-weight:700}.card-back{transform:rotateY(180deg)}.card-back img{height:100%;width:100%;object-fit:cover}.btn{background-color:#f44336;padding:10px 20px;border-radius:4px;font-weight:600;font-size:1.25rem}
