/* MEMORY
/////////////////////////////////////////////////////// */

.memory {
    width: 100%;
    height: auto;
    padding: 0 3vw;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
	gap: var(--gap);
	position: relative; }

.card {
	width: 100%;
	height: 55vh;
	-webkit-transform: scale(1);
            transform: scale(1);
	-webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
   -webkit-transition: transform 0.5s;
	       transition: transform 0.5s;
    position: relative; }

.card:active {
    -webkit-transform: scale(0.97);
            transform: scale(0.97);
    -webkit-transition: transform 0.2s;
            transition: transform 0.2s; }

.back,
.front {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: absolute;
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
            backface-visibility: hidden;
    -webkit-transition: all 0.25s;
            transition: all 0.25s;
    border: solid 2px var(--white);
    background: var(--orange); 
    border-radius: 0.965rem; }

.back {
    cursor: pointer; }

.back:hover{
    box-shadow: none; }

.front {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    -webkit-backface-visibility: visible;
       -moz-backface-visibility: visible;
            backface-visibility: visible; }

.back img,
.front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-transition: transform 0.5s;
	        transition: transform 0.5s; }

.flip {
  -webkit-transform: rotateY(180deg);
	      transform: rotateY(180deg); }

/* STYLE
/////////////////////////////////////////////////////// */