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


body {
    background-image: linear-gradient(to right top, aquamarine, lightgreen);
    min-height: 100vh;
}


// галерея
.layout {
    margin: 20px;
    div {
        height: 500px;
        img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }
    }    
    display: grid;
    grid:
      "first first seventh fifth fifth" 1fr
      "first first seventh fifth fifth" 1fr
      "eighth second second nineth tenth" 1fr
      "eighth second second nineth tenth" 1fr
      "eleventh twelveth third third thirteenth" 1fr
      "eleventh twelveth third third thirteenth" 1fr
      "sixth sixth fourteenth fourth fourth" 1fr
      "sixth sixth fourteenth fourth fourth" 1fr
      / 1fr 1fr 1fr 1fr 1fr;
    @include screen-medium {
        grid:
        "first first seventh" 1fr
        "first first seventh" 1fr
        "eighth fifth fifth" 1fr
        "eighth fifth fifth" 1fr
        "second second nineth" 1fr
        "second second nineth" 1fr
        "tenth third third" 1fr
        "tenth third third" 1fr
        "eleventh twelveth thirteenth" 1fr
        "eleventh twelveth thirteenth" 1fr
        "sixth sixth fourteenth" 1fr
        "sixth sixth fourteenth" 1fr
        "fourth fourth fourth" 1fr
        "fourth fourth fourth" 1fr
        / 1fr 1fr 1.25fr;
    }
    @include screen-small {
        grid:
        "first" 1fr
        "second" 1fr
        "third" 1fr
        "fourth" 1fr
        "fifth" 1fr
        "sixth" 1fr
        "seventh" 1fr
        "eighth" 1fr
        "nineth" 1fr
        "tenth" 1fr
        "eleventh" 1fr
        "twelveth" 1fr
        "thirteenth" 1fr
        "fourteenth" 1fr
        / 1fr;
    }
    .first { grid-area: first; }
    .seventh { grid-area: seventh; }
    .fifth { grid-area: fifth; }
    .eighth { grid-area: eighth; }
    .second { grid-area: second; }
    .nineth { grid-area: nineth; }
    .tenth { grid-area: tenth; }
    .eleventh { grid-area: eleventh; }
    .twelveth { grid-area: twelveth; }
    .third { grid-area: third; }
    .thirteenth { grid-area: thirteenth; }
    .sixth { grid-area: sixth; }
    .fourteenth { grid-area: fourteenth; }
    .fourth { grid-area: fourth; }
    gap: 20px;
}


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