:root{
  --backColor: var(--yellow-100);
  --backBorder: var(--yellow-600);
  --frontColor: var(--pink-100);
  --frontBorder: var(--pink-600);
  }


.flipcard{
  display: grid;
  height: 100%;
  max-height: 100%;
  width: 100%;
  max-width: 100%;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
  .front, .back {
      width: 100%;
      height: 100%;
      display: grid;
      grid-template-columns: repeat(3,1fr);
      grid-template-rows: auto repeat(2,minmax(80%,1fr));
      grid-column-gap: 5px;

      &:has(img:nth-of-type(4)) {
            grid-template-rows: auto repeat(2,minmax(30%,1fr));
      }

      padding: 0px;
      padding: 5px;
      h4,ul,p {grid-column: 1/-1; }
      > div {
        text-align: center;
        overflow:hidden;
    }
    img {
      width: 80%;
      height: 80%;
      max-width: 80%;
      object-fit:  contain;
      justify-self: center;
      align-self: center;
    }

    border-radius: 25px;
    grid-column: 1;
    grid-row: 1;
    max-height: 100ph;
    transition:
       transform 1s ease-in-out,
       opacity 0.5s step-end;
  }

  .front{background: var(--frontColor);}
  .back{background: var(--backColor);}
}

.front:has(:not(img):last-child){
      grid-template-rows: auto 1fr auto;
      > p{
        margin: 0;
      }
  }



.front.fragment.grow.visible {
  transition-timing-function: linear(0.00, -0.0559, 0.00351, 0.150, 0.346, 0.560, 0.763, 0.939, 1.08, 1.17, 1.23, 1.25, 1.23, 1.20, 1.16, 1.11, 1.06, 1.02, 0.987, 0.963, 0.949, 0.943, 0.945, 0.951, 0.961, 0.972, 0.984, 0.994, 1.00, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.00, 1.00, 1.00, 0.998, 0.997, 0.997, 0.997, 0.997, 0.998, 0.998, 0.999, 0.999, 1.00);
;
}

div.module {
  margin: 5px;
  border: 2pt black solid;
  display: grid;
  grid-template-columns: repeat(2,1fr);
}

.reveal .fragment.flipcard {
  opacity: 1;
  visibility: visible;
  will-change: opacity;

  &.visible {
    > .front {
        opacity: 0;
        transform: rotateY(0.5turn) translateZ(-1em);
      }
    > .back {
        transform: rotateY(1turn);
    }
  }
  &:not(.visible) {
    > .back {
        opacity: 0;
        transform: rotateY(0.5turn) translateZ(-1em);
      }
  }
}

.head.fragment {
  transition: all 1s ease-in-out, opacity 0.5s step-end;
}

.front.fragment {
  transition: all 1s ease-in-out, opacity 0.5s step-end;
    z-index: 2;

  &.visible {
    box-shadow: var(--shadow);
  }