*{margin:0;padding:0;box-sizing:border-box}.grid{width:100vw;height:calc(100dvh - 80px);max-height:calc(100vh - 80px)}.grid{font-size:min(10vw,18vh);display:flex;flex-direction:column}.row{display:flex;flex-grow:1}.col{flex-grow:1}.card{margin:2dvh 2vw;perspective:800px;width:calc(100% - 4vw);height:calc(100% - 4dvh)}.card__face{border:1px solid green;position:absolute;width:100%;height:100%;display:flex;justify-content:center;align-items:center;backface-visibility:hidden;border-radius:10px;box-shadow:0 2px 5px #0000004d;transition:transform .6s}.card__face--front{background-color:#fff}.card__face--back{background-color:#eff;transform:rotateY(180deg)}.card.is-flipped .card__face--front{transform:rotateY(180deg)}.card.is-flipped .card__face--back{transform:rotateY(0)}