.promotion{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    height: auto;
    position: relative;
    margin-bottom: 30px;

    
}

section > h2{
    text-align: center;
    font-size: 32px;
    padding:25px;
}

.promotion img{width: 300px; height: 300px; border-radius:  25px;}
.promotion_1{position: relative;}
.promotion_2{position: relative;}
.promotion_3{position: relative;}
.promotion_1 .front{position: absolute;}
.promotion_2 .front{position: absolute;}
.promotion_3 .front{position: absolute;}

.back img{
    opacity: 0.5;
}

.promotion .back,
.promotion .front{
    backface-visibility: hidden;
    transition: .5s;
    perspective: 5px;
}

.promotion .back{
    transform: rotateY(-180deg);
    position: relative;
    
}

.promotion_1:hover .front,
.promotion_2:hover .front,
.promotion_3:hover .front{
    transform: rotateY(180deg);
}

.promotion_1:hover .back,
.promotion_2:hover .back,
.promotion_3:hover .back{
    transform: rotateY(0deg);
}

.promotion_1,
.promotion_2,

.promotion_3{
    margin-right: 50px;
     margin-left: 50px;
}

.promotion h2{
font-size = 24px;
}

.text-box{
    position: absolute;
    width: 300px;
    height: 150px;
    margin-top: -250px;
    text-align: center;
    opacity: 1;
}

.text-box .btn-pro_1,
.text-box .btn-pro_2,
.text-box .btn-pro_3{ 
    width: 100px;
    height: 50px;
    font-size: 16px;
    border: 1px solid black;
    border-radius: 5px;
    background-color: white;
    color: #333;
    font-weight: bold;
    transition: .3s;
}

.text-box .btn-pro_1:hover,
.text-box .btn-pro_2:hover,
.text-box .btn-pro_3:hover{
    background-color:#333;
    color: white;
}