/*? завантаження шрифта Playfair Display' Regular 400 з локальної папки */
/* @font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf') format('woff2');
    src: url('../fonts/PlayfairDisplay-VariableFont_wght.ttf') format('woff2');
} */

/*? завантаження шрифта 'Tangerine' Bold 700 з локальної папки */
/* @font-face {
    font-family: 'Tangerine';
    src: url('../fonts/Tangerine-Bold.ttf') format('woff2');
    src: url('../fonts/Tangerine-Bold.ttf') format('woff2');
} */

/*? стилізация заголовків h2 */
.h2 {
    /* font-family:Verdana, Geneva, Tahoma, sans-serif; */
    /* font-family: "Playfair Display"; */
    /* font-family: "Tangerine"; */

    font-size: 30px;

    /* font-weight: 400; normal  */
    font-weight: 400;
    /* font-weight: 700; bold - аналог тегу <b> */
    /* font-weight: 700; */

    font-style: normal;
    /* font-style: italic; аналог тегу <i> */
    /* font-style: italic;  */

    /* text-decoration: underline; аналог тегу <u> */
    /* text-decoration: underline; */

    line-height: normal;
    /* 1.5 */
    /* line-height-auto це 1.2 */

    color: #626262;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}


/*! Урок-10-14. Базові принципи та етапи CSS-стилізації сайту згідно макету. */
:root {
    --color-main: #626262;
    --color-second:  #7d7d7d;
    --color-third:   #b4ad9e;
    --color-hover: #03a9f4;
    --font-family: "Playfair Display", sans-serif;
    --second-family: "Ubuntu", sans-serif;
}

body {
    
    font-family: var(--font-family);
    font-size: 14px;
    color: var(--color-main);
    /* background-color: aqua; */
}

.container {
    width: 905px;
    margin: 0 auto;
    /* padding: 0 15px; */
    outline: 2px dashed #2a2a2a;
}

/*! header */
.header {
    padding-top: 71px;
    padding-bottom: 92px;
    background-color: rgb(255, 235, 211);
}

.header-nav-list {
    width: 555px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    outline: 1px solid red;
}

.header-nav-list-item-link {
    /* font-family: "Playfair Display"; */
    /* font-weight: 400; */
    /* font-size: 14px; */
    text-transform: lowercase;
    text-transform: uppercase;
    color: var(--color-second);
}
.header-nav-list-item-link:hover {
    color: var(--color-hover);
}

/*! section gallery */
.gallery {
    margin-bottom: 66px;
    background-color: rgb(218, 255, 218);
}

.gallery-title {
    display: none;
}

/** var-1 */
/* .gallery-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
} */
/* .gallery-list-item {
    width: 420px;
    margin-bottom: 130px;
} */

/** var-2 */
.gallery-list {
    display: flex;
    flex-wrap: wrap;
    column-gap: 65px;
    row-gap: 130px;
}
.gallery-list-item {
    flex-basis: calc((100% - 65px) / 2);
}


.gallery-list-item-img {
    margin-bottom: 62px;
}
.gallery-list-item-link {
    display: block;
    margin-bottom: 32px;
    font-family: var(--second-family);
    font-weight: 300;
    /* font-size: 14px; */
    /* font-style: normal; */
    /* line-height: normal; */
    color: var(--color-third);
}
.gallery-list-item-title {
    margin-bottom: 40px;
    /* font-family: "Playfair Display"; */
    font-weight: 400;
    font-size: 30px;
    /* font-style: normal; */
    /* line-height: normal; */
    /* color: var(--color-main); */
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

/* .gallery-list-item-text {
    font-family: "Playfair Display";
    font-weight: 400;
    font-size: 14px;
    font-style: normal;
    line-height: normal;
    color: var(--color-main);
} */

/** flex-colum-container */
.flex-colum-container {
    display: flex;
    flex-direction: column;
}
.gallery-button {
    /* display: block; */
    /* margin: 0 auto; */
    /** flex-colum-container */
    align-self: center;
    /** var-1 */
    /* margin-top: -40px; */
    /** var-2 */
    margin-top: 90px;
    padding: 20px 48px 21px 48px;
    /* font-family: var(--font-family); */
    /* font-weight: 400; */
    /* font-size: 14px; */
    /* color: #626262;  */
    background-color: inherit;
}