/* ================================
   ONEPAGER CARDS IMG
================================ */

.op-cards-img-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:stretch;
  gap:30px;
  padding:0 25px;
  max-width:1400px;
  margin:0 auto;
}

.op-card-img-item{
  position:relative;
  display:flex;
  flex-direction:column;
  flex:0 0 350px;
  width:350px;
  max-width:100%;
  border-radius:var(--global-radius);
  overflow:hidden;
  border:var(--global-border);
  transition:0.2s all ease-in-out;
  will-change:transform, opacity;
  background:#fff !important;
  box-sizing:border-box;
}

.op-card-img-item:hover{
  box-shadow:var(--global-shadow);
}

.op-card-img-media,
.op-card-img-body{
  box-sizing:border-box;
}

/* ================================
   CAS SANS TEXTE
================================ */

.op-card-img-item.no-text .op-card-img-media{
  position:relative;
  flex:1 1 auto;
  min-height:210px;
  background:rgba(0,0,0,0.03);
}

.op-card-img-item.no-text .op-card-img-body{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:18px 18px 20px;
  background:#fff;
}

/* ================================
   CAS AVEC TEXTE
   image = 50%
   body = 50%
================================ */

.op-card-img-item.has-text .op-card-img-media{
  position:relative;
  flex:0 0 50%;
  min-height:0;
  background:rgba(0,0,0,0.03);
}

.op-card-img-item.has-text .op-card-img-body{
  flex:0 0 50%;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:18px 18px 20px;
  background:#fff;
  overflow:hidden;
  min-height:0;
}

.op-card-img-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.op-card-img-title{
  margin:0;
  color:#000 !important;
  font-size:18px !important;
  line-height:1.15 !important;
}

.op-card-img-text{
  color:#555;
  font-size:14px;
  line-height:1.5;
  overflow:hidden;
}

.op-card-img-text p{
  margin:0;
}

.op-card-img-text p + p{
  margin-top:6px;
}

.op-card-img-text ul,
.op-card-img-text ol{
  margin:6px 0 0;
  padding-left:18px;
}

.op-card-img-text li{
  margin-bottom:4px;
}

.op-card-img-link{
  margin-top:auto;
  color:var(--onepager-color1) !important;
  text-decoration:none !important;
  font-weight:600 !important;
  display:inline-flex !important;
  align-items:center !important;
}

.op-card-img-link::after{
  content:"\f061";
  font-family:"Font Awesome 7 Pro";
  font-weight:900;
  margin-left:8px;
  display:inline-block;
  transition:transform 0.3s cubic-bezier(.4,0,.2,1);
}

.op-card-img-link:hover::after{
  transform:translateX(6px);
}

/* Animation init */
.js-op-cards-img-container .op-card-img-item{
  opacity:0;
  transform:translateY(18px);
}

.js-op-cards-img-container.is-animated .op-card-img-item{
  opacity:1;
  transform:translateY(0);
}

@media (max-width:1024px){
  .op-card-img-item{
    flex:0 0 calc(50% - 15px);
    width:calc(50% - 15px);
    max-width:400px;
  }
}

@media (max-width:768px){
  .op-cards-img-grid{
    padding:0 15px;
  }

  .op-card-img-item{
    flex:0 0 100%;
    width:100%;
    max-width:400px;
  }

  .op-card-img-item.has-text .op-card-img-media,
  .op-card-img-item.has-text .op-card-img-body{
    flex:0 0 auto;
  }

  .op-card-img-item.has-text .op-card-img-media{
    min-height:220px;
  }
}