/*
    CSS DES 3 'IMAGES' de la section Les standard du web (std-web)
*/
.__cards{
    padding-bottom: 10%;
}

.middle {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.item-title{
    color: #40babd;
    /*color: rgb(214, 214, 214);*/
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    margin-bottom: 15px;
}
.item-title-main{
    color: rgb(32, 32, 32);
    font-weight: bold;
}

.__card {
    cursor: pointer;
    /*
    width: 340px;
    height: 480px;
    */
    width: 340px;
    height: 160px;
}

.front,
.back {
    width: 100%;
    height: 100%;
    overflow: hidden;
    backface-visibility: hidden;
    position: absolute;
    transition: transform .6s linear;
}

.front img {
    height: 100%;
}

.front {
    transform: perspective(600px) rotateY(0deg);
}

.back {
    /*background: #494d55;*/
    background: rgba(73, 77, 85, 0.2);
    transform: perspective(600px) rotateY(180deg);
}

.back-content {
    color: #b4b8bb;
    text-align: center;
    width: 100%;
}

.sm {
    margin: 20px 0;
}

.sm a {
    display: inline-flex;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    color: #2c3e50;
    font-size: 18px;
    transition: 0.4s;
    border-radius: 50%
}

.sm a:hover {
    background: #2c3e50;
    color: white;
}

.__card:hover>.front {
    transform: perspective(600px) rotateY(-180deg);
}

.__card:hover>.back {
    transform: perspective(600px) rotateY(0deg);
}