/* Section 1 */

.memory-game-cont {
    padding-block:var(--space-l-2xl);
    background: var(--white);
    overflow-x:auto;
}

.memory-game {
  width:100%;
  margin: auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  perspective: 1000px;
  gap:var(--space-xs-s);
  min-width: 1200px;
}

.memory-card {
  --column-count:6;

  --column-percent:calc( 100% / var(--column-count) );
  width: calc( var(--column-percent) - var(--space-xs-s));
  xmin-width:150px;
  aspect-ratio:.6;
  position: relative;
  transform: scale(1);
  transform-style: preserve-3d;
  transition: all .5s;
  border-radius: 10px;
  xfilter: drop-shadow(2px 2px 4px rgba(0,0,0,.3));
  cursor: pointer;

  --grid-size:calc(var(--space-l) /1.5 );
}

@media (hover: hover) {
  .memory-card:hover  {
    transform:scale(1.05);
  }
}

.memory-card:active {
  transform: scale(0.97);
  transition: transform .2s;
}

.memory-card.flip {
  transform:rotateY(180deg) rotate(0deg);
  pointer-events: none;
}

.memory-card.wrong {
  animation:wiggle .3s ease-in-out 3;
  animation-delay: .5s;
}
.memory-card.wrong .front-face,
.memory-card.wrong .back-face {
  background:var(--fire);
}
.memory-card.wrong .logo-white {
  opacity:1;
}
.memory-card.wrong .logo-green {
  opacity:0;
}

@keyframes wiggle {
  0%, 100% { transform: rotateY(180deg) rotate(0deg); }
  25%, 75% { transform: rotateY(180deg) rotate(-2deg); }
  50%      { transform: rotateY(180deg) rotate(2deg); }
}

.front-face,
.back-face {
  width: calc( 100% - calc( var(--grid-size) *2.3));
  height: calc( 100% - calc( var(--grid-size)  *2.3));
  padding: var(--space-xs);
  position: absolute;
  top:calc( var(--grid-size) *1.15);
  left:calc( var(--grid-size) *1.15);
  backface-visibility: hidden;
  transition: all .5s;
  transition-delay: .3s;
  background: var(--white);
  transform-style: preserve-3d;
}
.front-face img {
  transition: all .5s;
  transition-delay: .3s;
}
.memory-card .logo-white {
  opacity:0
}
.memory-card .logo-green {
  opacity:1;
}

.text-cont {
  display: flex;
  justify-content: center;
  align-items: center;
  color:var(--corporategreen);
  overflow-y: auto;
  transform-style: preserve-3d;
}
.text-cont-inner {
  width:100%;
  height:100%;
}
.text-title {
  font-size: var(--step-1);
  font-weight: 700;
  font-family: var(--poppins);
  text-transform: uppercase;
}
p {
  font-size:var(--step--1)
}

.front-face {
  transform:rotateY(180deg);
}
.front-face {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.front-face img {
  position:absolute;
  width:100%;
  height:auto;
  object-fit: contain;
}

.matched .front-face, .matched .back-face {
    background:var(--medallion);
}

.borders {
  position:absolute;
  width:100%;
  height:100%;
  --grid-border-size: calc(var(--grid-size) /6 );
  background:transparent;
  border:var(--grid-border-size) solid var(--corporategreen);
  box-sizing: border-box;
  transform-style: preserve-3d;
  pointer-events: none;
  z-index: 1;
}
.border {
  position:absolute;
  box-sizing: border-box;
  display: grid;
}
.border.left, .border.right {
  width: var(--grid-size);
  height:100%;
  grid-template-rows: repeat(5, 1fr);
}
.border.left {
  left:0;
  border-right:var(--grid-border-size) solid var(--corporategreen);
  padding-right:var(--grid-border-size);
}
.border.right {
  right:0;
  border-left:var(--grid-border-size) solid var(--corporategreen);
  padding-left:var(--grid-border-size);
}
.border.top, .border.bottom {
  width: 100%;
  height:var(--grid-size);
  grid-template-columns: repeat(3, 1fr);
}
.border.top {
  top:0;
  border-bottom:var(--grid-border-size) solid var(--corporategreen);
  padding-bottom:var(--grid-border-size);
}
.border.bottom {
  bottom:0;
  border-top:var(--grid-border-size) solid var(--corporategreen);
  padding-top:var(--grid-border-size);
}
.border .block {
  width:100%;
  height:100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.border .block:nth-of-type(odd) {
  background:var(--corporategreen);
}
.border .block:nth-of-type(even) {
  background:var(--white);
}
.border .block p {
  font-size:var(--grid-size);
  margin:0;
  padding:0;
  color:var(--frost);
}
.border .block .bg {
  width:100%;
  height:100%;
  background: center center / contain no-repeat url(../logos/Icon_Frost.png);
}