@import "./reset/_reset.scss";
@import "./help/_variables.scss";


// Секция для ссылки на загрузку кода
.download a{
    font-size: 20px;
    color: blue;
}
.download{    
    width: 200px;
    position: absolute;   
    bottom: 0;
    right: 0;
    margin-right: 5%;
    margin-bottom: 7.5%;
}


// карточка
.wrapper {
    background: linear-gradient(45deg, darkcyan, cyan);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    .card {
        position: relative;
        border-radius: 20px;
        width: $width;
        height: $height;
        cursor: pointer;
        img {
            border-radius: 20px;
            width: 100%;
            height: auto;
        }
        .front {
            backface-visibility: hidden;                            //не отображать обратную сторону, если она повёрнута
            transition: 0.5s transform ease;
        }
        &:hover .front {
            transform: perspective(600px) rotateY(-180deg);         //поворачиваем на обратную сторону
          }
        .back {
            position: absolute;
            top: 0;
            backface-visibility: hidden;                            //не отображать обратную сторону, если она повёрнута
            transform: perspective(600px) rotateY(180deg);          //по-умолчанию повёрнута обратной стороной   
            transition: 0.4s transform ease;
        }
        &:hover .back {
          transform: perspective(600px) rotateY(0deg);              //поворачиваем на лицевую сторону
        }
    }    
}