/* team */
/* ------------------------------------------------------------------------------ */
/* CARDS ANIMATED                                                 6.02/00 - 02-11-25
/* ------------------------------------------------------------------------------ */
/* link   -> https://codepen.io/littlesnippets/pen/PZBBLe                         */
/* update -> 06-11-2018                                                           */
/* info   -> css only - no javascript necessary                                   */
/* ------------------------------------------------------------------------------ */

/* CARD CONTAINER */
.card-container {
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:18px;
}

/* CARDS ANIMATED */
.snip1369 {
    display:flex;
    position:relative;
    flex-direction:column;
    min-width:256px;
    max-width:256px;
    width:100%;
    margin:0;
    padding:0;
    font-size: 16px;
    text-align: left;
    overflow:hidden;
    background:rgb(65,134,107,.4); /* #41866B; */
    color: #ffffff;
    border-radius:6px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    transition:transform 0.3s ease-out;
}
  
.snip1369 img {
    width:100%;
    transform:scale(1.04);
    transition:transform 0.3s ease-out;
}
  
.snip1369:hover {
    transform:scale(1.05);
}
  
.snip1369:hover img {
    transform:scale(1.1);
}
  
.snip1369 figcaption {
    position:absolute;
    right:0;
    left:0;
    bottom: 52px; /* to set the h3 over the bottom border - depends on font-size */
    padding:16px;
    background: rgba(255, 255,255,.8);
    transition:transform 0.3s ease-out;
    transform:translateY(100%);
}
  
.snip1369:hover figcaption {
    bottom:0;
    transform:translateY(0);
}

.snip1369 h3 {
    margin:2px 0 12px 0;
    font-size: 18px;
    text-align:center;
}

.snip1369 p {
    font-size: 16px;
} 
  
.snip1369 .read-more {
    display:block;
    padding-top: 10px;
    opacity:0;
    transition:opacity 0.3s ease-out;
    text-align:right;
    font-weight:bold;
}
  
.snip1369:hover .read-more {
    opacity:1;
}
  
.snip1369 a {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:1;
}

/* ------------------------------------------------------------------------------ */
/* END */	
/* ------------------------------------------------------------------------------ */