* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   background-image: url("images/puzz.jpg");
   color: white;
}
h1 {
   font-family: arial;
   margin-bottom: 30px;
   border-bottom: 3px solid white;
}
section {
   display: grid;
   -webkit-display: grid;
   -moz-display: grid;
   -o-display: grid;
   -ms-display: grid;
   grid-template-columns: repeat(4, 6rem);
   grid-template-rows: repeat(4, 6rem);
   gap: 15px;
   perspective: 800px;
   -webkit-perspective: 800px;
   -moz-perspective: 800px;
   -o-perspective: 800px;
   -ms-perspective: 800px;
   padding: 10px;
   background-color: #3b6d2650;
}
img {
   border-radius: 3px;
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.card {
   position: relative;
   transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   -webkit-transform-style: preserve-3d;
   -ms-transform-style: preserve-3d;
   -o-transform-style: preserve-3d;
   -webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   -ms-transform-style: preserve-3d;
   -o-transform-style: preserve-3d;
   -webkit-transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   -moz-transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   -o-transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   -ms-transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 15px;
}
.face,
.back {
   width: 100%;
   height: 100%;
   position: absolute;
   pointer-events: none;
}

.back {
   background-color: white;
   backface-visibility: hidden;
}

.toggleCard {
   transform: rotateY(180deg);
   -webkit-transform: rotateY(180deg);
   -moz-transform: rotateY(180deg);
   -ms-transform: rotateY(180deg);
   -o-transform: rotateY(180deg);
}

.face {
   transform: rotateY(-180deg);
   -webkit-transform: rotateY(-180deg);
   -moz-transform: rotateY(-180deg);
   -ms-transform: rotateY(-180deg);
   -o-transform: rotateY(-180deg);
}

@media only screen and (max-width: 700px) {
   section {
      display: grid;
      grid-template-columns: repeat(4, 3.5rem);
      grid-template-rows: repeat(4, 3.5rem);
      gap: 15px;
      -webkit-perspective: 800px;
      -moz-perspective: 800px;
      -ms-perspective: 800px;
      -o-perspective: 800px;
      perspective: 800px;
      padding: 5px;
      background-color: #3b6d2650;
   }
}