@charset "utf-8";
/* CSS Document */

/* GRID BASE */

.gmi-flip-grid{
  display:grid;
  gap:0px;
 /* gap:28px;*/
}

/* COLONNE - DEFAULT / MOBILE */
.gmi-flip-grid.cols-1{ grid-template-columns:repeat(1,1fr); }
.gmi-flip-grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.gmi-flip-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.gmi-flip-grid.cols-4{ grid-template-columns:repeat(4,1fr); }
.gmi-flip-grid.cols-5{ grid-template-columns:repeat(5,1fr); }
.gmi-flip-grid.cols-6{ grid-template-columns:repeat(6,1fr); }

/* TABLET >= 768px */
@media(min-width:768px){
  .gmi-flip-grid.cols-md-1{ grid-template-columns:repeat(1,1fr); }
  .gmi-flip-grid.cols-md-2{ grid-template-columns:repeat(2,1fr); }
  .gmi-flip-grid.cols-md-3{ grid-template-columns:repeat(3,1fr); }
  .gmi-flip-grid.cols-md-4{ grid-template-columns:repeat(4,1fr); }
  .gmi-flip-grid.cols-md-5{ grid-template-columns:repeat(5,1fr); }
  .gmi-flip-grid.cols-md-6{ grid-template-columns:repeat(6,1fr); }
}

/* DESKTOP >= 992px */
@media(min-width:992px){
  .gmi-flip-grid.cols-lg-1{ grid-template-columns:repeat(1,1fr); }
  .gmi-flip-grid.cols-lg-2{ grid-template-columns:repeat(2,1fr); }
  .gmi-flip-grid.cols-lg-3{ grid-template-columns:repeat(3,1fr); }
  .gmi-flip-grid.cols-lg-4{ grid-template-columns:repeat(4,1fr); }
  .gmi-flip-grid.cols-lg-5{ grid-template-columns:repeat(5,1fr); }
  .gmi-flip-grid.cols-lg-6{ grid-template-columns:repeat(6,1fr); }
}

/* DESKTOP GRANDE >= 1200px */
@media(min-width:1200px){
  .gmi-flip-grid.cols-xl-1{ grid-template-columns:repeat(1,1fr); }
  .gmi-flip-grid.cols-xl-2{ grid-template-columns:repeat(2,1fr); }
  .gmi-flip-grid.cols-xl-3{ grid-template-columns:repeat(3,1fr); }
  .gmi-flip-grid.cols-xl-4{ grid-template-columns:repeat(4,1fr); }
  .gmi-flip-grid.cols-xl-5{ grid-template-columns:repeat(5,1fr); }
  .gmi-flip-grid.cols-xl-6{ grid-template-columns:repeat(6,1fr); }
}

/* CARD */

.gmi-flip-card{
  min-height:320px;
  perspective:1200px;
  box-sizing:border-box;
}

.gmi-flip-inner{
  position:relative;
  width:100%;
  height:100%;
  min-height:320px;

  transition:transform .7s ease;
  transform-style:preserve-3d;

  box-sizing:border-box;
}

.gmi-flip-card:hover .gmi-flip-inner,
.gmi-flip-card:focus-within .gmi-flip-inner{
  transform:rotateY(180deg);
}



/* FACCE */

.gmi-flip-face{
  position:absolute;
  inset:0;

  /*border-radius:8px;*/
  overflow:hidden;

  backface-visibility:hidden;
  box-sizing:border-box;
}

.gmi-flip-front{
  z-index:2;
}

.gmi-flip-back{
  z-index:3;
}

/* FRONT */

.gmi-flip-front{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  color:#fff;
}

.gmi-overlay{
  position:absolute;
  inset:0;
  z-index:1;

  background:linear-gradient(
    to top,
    rgba(0,0,0,.72),
    rgba(0,0,0,.20)
  );

  pointer-events:none;
}

/* BACK */

.gmi-flip-back{
  background:#004651; /* default retro */
  color:#fff;

  transform:rotateY(180deg);
}

/* CONTENUTI */

.gmi-content{
  position:relative;
  z-index:2;

  width:100%;
  max-width:100%;
  height:100%;

  padding:30px 24px;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  text-align:center;

  box-sizing:border-box;
  overflow-wrap:break-word;

  pointer-events:auto;
}

.gmi-content h3{
  margin:0 0 14px 0;

  font-size:1.3rem;
  font-weight:700;
  line-height:1.25;
}

.gmi-content p{
  margin:0;

  line-height:1.5;
}

.gmi-flip-back p{
  margin-bottom:22px;
}



/* BUTTON / LINK */
.gmi-flip-face{
  position:absolute;
  inset:0;

  /* border-radius:8px;*/
  overflow:hidden;

  backface-visibility:hidden;
  box-sizing:border-box;
}

.gmi-flip-front{
  z-index:2;
}

.gmi-flip-back{
  z-index:3;
  background:#004651;
  color:#fff;
  transform:rotateY(180deg);
}

.gmi-flip-back button,
.gmi-flip-back .btn{
  position:relative;
  z-index:20;
  pointer-events:auto;

  /*border-radius:4px;*/
  padding:9px 18px;
  font-weight:600;
  cursor:pointer;
}

/* COLONNE STRETTE */
.gmi-flip-grid.cols-5 .gmi-content,
.gmi-flip-grid.cols-6 .gmi-content,
.gmi-flip-grid.cols-lg-5 .gmi-content,
.gmi-flip-grid.cols-lg-6 .gmi-content,
.gmi-flip-grid.cols-xl-5 .gmi-content,
.gmi-flip-grid.cols-xl-6 .gmi-content{
  padding:22px 18px;
}

.gmi-flip-grid.cols-5 .gmi-content h3,
.gmi-flip-grid.cols-6 .gmi-content h3,
.gmi-flip-grid.cols-lg-5 .gmi-content h3,
.gmi-flip-grid.cols-lg-6 .gmi-content h3,
.gmi-flip-grid.cols-xl-5 .gmi-content h3,
.gmi-flip-grid.cols-xl-6 .gmi-content h3{
  font-size:1.05rem;
}

.gmi-flip-grid.cols-5 .gmi-content p,
.gmi-flip-grid.cols-6 .gmi-content p,
.gmi-flip-grid.cols-lg-5 .gmi-content p,
.gmi-flip-grid.cols-lg-6 .gmi-content p,
.gmi-flip-grid.cols-xl-5 .gmi-content p,
.gmi-flip-grid.cols-xl-6 .gmi-content p{
  font-size:.92rem;
}

/* MOBILE */
@media(max-width:575px){
  .gmi-flip-card,
  .gmi-flip-inner{
    min-height:280px;
  }
}