.cards-list.macaron {
    width: min(100%,1600px);
    margin-top: 40px;
}

.card.macaron {
    display: block;
    width: 100%;
    max-width: 360px;
    min-width: min(160px, 70vw);
    padding: 10px;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
    text-decoration: none;
    box-shadow: none;
}
article.macaron .card-link {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

.card-photo-container {
    border-radius:50%;
    box-shadow:0px 2px 10px 1px rgba(0,0,0,0.03);
    margin:0 50px 24px 50px;
    position:relative;
    display:block;
    overflow:hidden;
    opacity:0.999;
   }
   .card-photo-container {
    display:block;
    width:80%;
    padding-top: 80%;
    /* transition:all 0.85s ease-in-out; */
    /* -webkit-transition:all 0.85s ease-in-out; */
    -moz-transition:all 0.85s ease-in-out;
    /* transform:scale(1); */
    /* -webkit-transform:scale(1); */
    -ms-transform:scale(1);
    -moz-transform:scale(1);
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
   }
   .card-photo-container .card-icon-container {
    position:absolute;
    /* transition:all 0.3s ease-in-out; */
    /* -webkit-transition:all 0.3s ease-in-out; */
    -moz-transition:all 0.3s ease-in-out;
    top:0;
    left:0;
    bottom:0;
    opacity:1;
    width:100%;
    text-align:center;
    border:10px solid rgba(0,0,0,0.04);
    border-radius:100%;
   }
   .card-photo-container i {
    top:50%;
    left:50%;
    opacity:0;
    transform:scale(.85);
    -webkit-transform:scale(.85);
    -ms-transform:scale(.85);
    -moz-transform:scale(.85);
    transition:all 0.25s ease-in-out;
    -webkit-transition:all 0.25s ease-in-out;
    -moz-transition:all 0.25s ease-in-out;
    position:absolute;
    color:#fff;
    font-size:30px;
    width:30px;
    height:30px;
    line-height:30px;
    margin:0 auto;
    margin-left:-15px;
    margin-top:-15px;
    display:inline-block;
   }
   .card-link:hover .card-photo-container img {
    transform:scale(1.15);
    -webkit-transform:scale(1.15);
    -ms-transform:scale(1.15);
    -moz-transform:scale(1.15);
   }
   .card-link:hover .card-photo-container i {
    opacity:1;
    transform:scale(1);
    -webkit-transform:scale(1);
    -ms-transform:scale(1);
    -moz-transform:scale(1);
   }
   .card-link:hover .card-photo-container .card-icon-container {
    border:0px solid transparent;
    height:100%;
    background:var(--global--color-primary);
    opacity: 80%;
   }
   


.card.macaron h3.card-title {
    color: var(--global--color-dark-gray);
    margin-bottom: 8px;
    -moz-transition: all .3s ease-in-out;
    font-weight: 400;
    text-transform: uppercase;
    font-family: Montserrat, Arial, Helvetica, sans-serif;
    text-rendering: optimizeLegibility;
    letter-spacing: 2px;
    font-weight: 700;
    font-size: 15px;
    line-height: 24px;
    font-style: normal;
    margin-top: 0;
    padding: 0;
    text-align: center;
    padding-left:10px;
    padding-right:10px;
}

.card-link:hover .card.macaron h3.card-title {
    color: black;
}

.card.macaron div.card-subtitle {
    box-sizing: border-box;
    text-align: center;
    padding-left:10px;
    padding-right:10px;
}

.card.macaron p.card-subtitle {
    font-family: Montserrat, Arial, Helvetica, sans-serif;
    font-weight: 400;
    color: var(--global--color-gray);
    text-align: center;
}