/**************************************************************************************************/
/**************************************************************************************************/
/* ОБЩЕЕ ФОРМАТИРОВАНИЕ */

* { margin: 0px; 
    padding: 0px;
    box-sizing: border-box;
    font-size: 16px;
}

/* ОБЩЕЕ ФОРМАТИРОВАНИЕ */
/**************************************************************************************************/
/**************************************************************************************************/


/**************************************************************************************************/
/**************************************************************************************************/
/* СЕКЦИЯ ДЛЯ ССЫЛКИ НА СКАЧИВАНИЕ ШАБЛОНА */

.download{
    position: fixed;   
    bottom: 0;
    right: 0;
    margin-right: 5%;
    margin-bottom: 5%;
}

.download a{
    color: blue;
}

/* СЕКЦИЯ ДЛЯ ССЫЛКИ НА СКАЧИВАНИЕ ШАБЛОНА */
/**************************************************************************************************/
/**************************************************************************************************/


/**************************************************************************************************/
/**************************************************************************************************/
/* grid-контейнер */
.wrapper {
    display: grid;
    grid-template-columns: minmax(175px, 1fr) 9fr;
    grid-template-rows: 125px 1fr;
    grid-template-areas:
        "header header"
        "sidebar gallery";
}
/* grid-контейнер */
/**************************************************************************************************/
/* header-экземпляр контейнера */
.header {
    grid-area: header;
    display: flex;
    background-image: linear-gradient(to right top, white, lightskyblue, white);
}
h1 {
    margin: auto;                                                                                  /* так как это экземпляр flexbox, таким образом блок будет по центру */
    font-size: 3rem;
}
/* header-экземпляр контейнера */
/**************************************************************************************************/
/* sidebar-экземпляр контейнера */
.sidebar {
    grid-area: sidebar;
    padding: 0 25px;
    background-image: linear-gradient(to right top, white, lightskyblue, white);
}
.sidebar ul {
    margin: 100px 0;
    list-style-type: none;
}
.sidebar ul li{
    margin: 25px 0;
    text-align: end;
}
.sidebar ul li a{
    font-size: 1.5rem;
    text-decoration: none;
    color: black;
}

/* sidebar-экземпляр контейнера */
/**************************************************************************************************/
/* gallery-экземпляр контейнера */
.gallery {
    grid-area: gallery;
}
/* gallery-экземпляр контейнера */
/**************************************************************************************************/
/**************************************************************************************************/


/**************************************************************************************************/
/**************************************************************************************************/
/* grid-контейнер вложенный */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));                                    /* автоматическое определение количества экземпляров grid-контейнера в линии с заданием минимального размера ширины */
    gap: 5px;
    background-color: lightblue;
}
.gallery a:nth-child(2n) {
    margin: auto 0 0 0;
}
.gallery img{ 
    width: 100%;
    display: block;
    border-radius: 10px;
}
/* grid-контейнер вложенный */
/**************************************************************************************************/
/**************************************************************************************************/


/**************************************************************************************************/
/**************************************************************************************************/
/* фиксированное меню */
.wrapper ul {
    position: fixed;
    left: 40px;
    top: 40px;
}
/* фиксированное меню */
/**************************************************************************************************/
/**************************************************************************************************/