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

// Основная обёртка
.wrapper {
    width: calc(1200px + $main-margin * 2);
    height: 1200px;
    margin: calc($main-margin * 3) auto $main-margin auto;
    display: flex;
    flex-flow: column wrap;
    gap: $main-margin;
    a {
        display: block;
        width: 400px;
        height: 325px;
        opacity: 0.7;
        border-radius: $main-margin;
        transition: 1s transform, 1s opacity, 1s box-shadow, 1s background-size;
        &:hover {
            transform: scale(1.2);
            opacity: 1;
            box-shadow: 0 0 10px 10px rgba(255,211,48,.5), 0 0 30px 30px rgba(106,255,138,.5), 0 0 50px 50px rgba(255,75,207,.5);
            background-size: 120% auto;
            position: relative;
            z-index: 10;
        }
    }
    :nth-child(1n) {
        background-color: aqua;
        flex: 0 0 325px;
    }
    :nth-child(2n) {
        background-color: aliceblue;
        flex: 1 0 300px;
    }
    :nth-child(1) {
        background-image: url(../add/pictures/1.jpg);
        background-size: 100% auto;
        background-position: 0 55%;
        background-repeat: no-repeat;
    }
    :nth-child(2) {
        background-image: url(../add/pictures/2.jpg);
        background-size: 100% auto;
        background-position: 0 65%;
        background-repeat: no-repeat;
    }
    :nth-child(3) {
        background-image: url(../add/pictures/3.jpg);
        background-size: 100% auto;
        background-position: 0 55%;
        background-repeat: no-repeat;
    }
    :nth-child(4) {
        background-image: url(../add/pictures/4.jpg);
        background-size: 100% auto;
        background-position: 0 50%;
        background-repeat: no-repeat;
    }
    :nth-child(5) {
        background-image: url(../add/pictures/5.jpg);
        background-size: 100% auto;
        background-position: 0 35%;
        background-repeat: no-repeat;
    }
    :nth-child(6) {
        background-image: url(../add/pictures/6.jpg);
        background-size: 100% auto;
        background-position: 0 65%;
        background-repeat: no-repeat;
    }
    :nth-child(7) {
        background-image: url(../add/pictures/7.jpg);
        background-size: 100% auto;
        background-position: 0 35%;
        background-repeat: no-repeat;
    }
    :nth-child(8) {
        background-image: url(../add/pictures/8.jpg);
        background-size: 100% auto;
        background-position: 0 0;
        background-repeat: no-repeat;
    }   
    :nth-child(9) {
        background-image: url(../add/pictures/9.jpg);
        background-size: 100% auto;
        background-position: 0 5%;
        background-repeat: no-repeat;
    }
}

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