.flip-card {
  position: relative;
  transform-style: preserve-3d;
  /*transition: transform 0.6s;*/
  cursor: pointer;

  width: 100%;
  height: calc(450/10 * 1rem);

  @container (width > calc(500/10 * 1rem)) {
    width: 85%;
    height: calc(460/10 * 1rem);
  }

  @container (width > calc(768/10 * 1rem)) {
    width: calc(350/10 * 1rem);
    height: calc(350/10 * 1rem);
  }

  @container (width > calc(992/10 * 1rem)) {
    width: calc(400/10 * 1rem);
    height: calc(400/10 * 1rem);
  }

  @container (width > calc(1200/10 * 1rem)) {

    width: calc(512/10 * 1rem);
    height: calc(512/10 * 1rem);
  }
}

.flip-card--is-flipped .flip-card__inner {
  transform: rotateY(180deg);
}

.flip-card__inner {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 250ms ease;
}

.flip-card__front,
.flip-card__back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  border-radius: calc(20/10 * 1rem);
  overflow: hidden;
  box-shadow: 2px 2px 2px #00000077;
}

/*.flip-card__front:after {*/
/*  display: block;*/
/*  position: absolute;*/
/*  bottom: calc(15/10 * 1rem);*/
/*  right: calc(15/10 * 1rem);*/
/*  backrgound-image: url("/themes/custom/radicati_d8/")*/
/*}*/

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