/* lesson styles */
/* @import url(./basic-styles.css); */

:root {
    /** ============ CSS-змінні ============ */
    --color-font-body: #220c0c;
    --color-background-body: #eeffe8;
    --color-title-lesson: #4b4200;
    --color-title-section: red;
    --color-title-subsection: blue;
}

body {
    font-family: 'Montserrat', serif;
    font-size: 1.5rem;
    /* padding: 20px 20px 150px; */
    padding: 20px 0px 150px;
    /* min-height: 100vh; */
    /* display: flex; */
    /* flex-direction: column; */
    /* gap: 20px; */
    /* flex-wrap: wrap; */
    /* justify-content: center; */
    /* text-align: center; */
    /* align-items: center; */
    color: var(--color-font-body);
    background-color: var(--color-background-body);
}

.title-lesson {
    text-align: center;
    margin-bottom: 20px;
    color: var(--color-title-lesson);
    text-shadow: 4px 2px 6px #43300088;
    /* ! for position: fixed */
    /* margin-bottom: 350px; */
}

.title-section {
    margin-top: 10px;
    margin-bottom: 30px;
    text-align: center;
    color: var(--color-title-section);
    text-shadow: 4px 2px 6px #a17301bd;
}

.title-subsection {
    margin-top: 10px;
    margin-bottom: 15px;
    font-style: italic;
    color: var(--color-title-subsection);
    text-shadow: 4px 2px 6px #0114a1bd;
}

.part,
.part-13 {
    /* display: flex; */
    /* flex-direction: column; */
    /* align-items: center; */
    padding: 10px 0;
    margin: 0 auto 50px;
    min-height: 100vh;
    /* width: 90vw; */
    width: 90%;
    background-color: #feffed;
    outline: 1px solid red;
}

/* *======================================= */
/*? Загальні властивості до .container */
.container {
    outline: 2px solid blue;
}

/* ! */
/* .part_1-1 {
    display: none;
} */
/*! 1-1.Властивість display: grid; */
.part_1-1 .container {
    width: 400px;
    height: 400px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 35px;
    text-align: center;
    border: 4px solid black;
    background-color: #ff6f69;
    /* outline: 1px solid red; */
}

.part_1-1 .container {
    display: grid;
}


/* ! */
/* .part_1-2 {
    display: none;
} */
/*! 1-2.Властивість display: inline-grid; */
.part_1-2 .container {
    width: 400px;
    height: 400px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 35px;
    text-align: center;
    border: 4px solid black;
    background-color: #ffc869;
    /* outline: 1px solid red; */
}

.part_1-2 .container {
    display: inline-grid;
}


/* ! */
/* .part_2and3 {
    display: none;
} */
/*! 2.Створення колонок і рядків в CSS Grid */
/*! 3.Відступи між рядками та колонками */
/*? Загальні властивості до .grid-item */
.grid-item {
    display: grid;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    /* border: 2px solid rgba(0, 0, 0, 0.5); */
    outline: 2px solid rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    color: rgba(0, 0, 0, 0.5);
    background-color: #ffa7a7;
}

.part_2and3 .container {
    display: grid;
    
    /*? КОЛОНКИ (width): */
    /*?_(1)_  3 (три) колонки з шириною 100px 200px 400px */
    grid-template-columns: 100px 200px 400px;
    
    /*todo РЯДКИ (height): */
    /*todo_(1)_  3 (три) рядки з висотою 100px 200px 400px */
    /* grid-template-rows: 100px 200px 400px; */
    /*todo_(2)_  4 (чотири) рядки з висотою 100px 200px 400px 100px */
    grid-template-rows: 100px 200px 400px 100px;
    
    /** ВІДСТУПИ */
    /*? ВІДСТУПИ між КОЛОНКАМИ */
    /* column-gap: 20px; */
    /*todo ВІДСТУПИ між РЯДКАМИ */
    /* row-gap: 5px; */
    /** Однакові ВІДСТУПИ між РЯДКАМИ та КОЛОНКАМИ */
    /* gap: 10px; */
    /** Різні ВІДСТУПИ між РЯДКАМИ та КОЛОНКАМИ */
    gap: 5px 20px;
}


/* ! */
/* .part_4 {
    display: none;
} */
/*! 4.Явні і неявні сітки */
.part_4 .container {
    display: grid;
    gap: 20px;
    
    /*? 2 (дві) колонки з шириною 100px 200px */
    grid-template-columns: 100px 200px;
    
    /*todo 2 (два) рядки з висотою 100px 200px */
    grid-template-rows: 100px 200px;
    
    /** НЕЯВНІ СІТКИ */
    /**_(1) 2 (два) додаткових рядка з однаковою висотою 100px */
    /* grid-auto-rows: 100px; */
    /**_(2) 2 (два) додаткових рядка з висотою 400px 100px */
    grid-auto-rows: 400px 100px;
    
    /** ПРИКЛАД: */
    /*?_(1-1) 4 (чотири) колонки з однаковою шириною */
    /* grid-template-columns: repeat(4, auto); */
    /*?_(1-2) 4 (чотири) колонки з однаковою шириною */
    /*?     ❗️❗️❗️ auto працює НЕ ОДНАКОВО з 1fr (дивись далі...)*/
    /* grid-template-columns: repeat(4, 1fr); */
    /*todo та з висотою 200px */
    /* grid-auto-rows: 200px; */
}


/* ! */
/* .part_5 {
    display: none;
} */
/*! 5.Властивість grid-auto-flow */
.part_5 .container {
    display: grid;
    gap: 20px;
    
    /*? 2 (дві) колонки з шириною 200px 400px */
    grid-template-columns: 200px 400px;
    
    /** grid-auto-flow - автоматичне створенння колонок або рядків */
    /*? додаткові колонки з однаковою шириною */
    grid-auto-flow: column;
    /*? додаткові колонки з шириною 50px */
    /* grid-auto-columns: 50px; */
    /*? додаткові колонки з шириною 50px та 100px */
    grid-auto-columns: 50px 100px;
    /*todo додаткові рядки з однаковою висотою (значення за замовчуванням) */
    /* grid-auto-flow: row; */
}


/* ! */
/* .part_6 {
    display: none;
} */
/*! 6.Робота з розмірами в CSS Grid */
.part_6 .container {
    width: 1000px; /* ! */
    margin: 0 auto;
    display: grid;
    /* ! */
    gap: 20px; 
    
    /*?_(1)_ 4 (чотири) колонки з шириною 100px 200px 400px */
    /* grid-template-columns: 100px 200px 300px 400px; */
    /*?_(2)_ 4 (чотири) колонки з однаковою шириною = 25% = 250px */
    /* grid-template-columns: 25% 25% 25% 25%; */
    /*?_(3)_ 4 (чотири) колонки з однаковою шириною = 1fr (одна наша фракція) = 235px */
    /*?     ❗️ 1fr (фракція, одиниця гнучкості) = 1 частині доступного простору */
    /*?     ❗️ 1fr (одна наша фракція) = (1000px-20px*3)/4=235px */
    /* grid-template-columns: 1fr 1fr 1fr 1fr; */
    /*?_(4)_ 4 (чотири) колонки з з шириною 100px 280px 280px 280px */
    /*?     ❗️ 1fr (одна наша фракція) = (1000px-20px*3-100px)/3=280px */
    /* grid-template-columns: 100px 1fr 1fr 1fr; */
    /*?_(5)_ 4 (чотири) колонки з з шириною 100px 210px 420px 210px */
    /*?     ❗️ 1fr (одна наша фракція) = (1000px-20px*3-100px)/4=210px */
    /* grid-template-columns: 100px 1fr 2fr 1fr; */
    /*?_(6)_ 4 (чотири) колонки з з шириною 100px auto(40.02px) 533.33px 266.66px */
    /*?     ❗️ auto = ширини контенту */
    /*?     ❗️ 1fr (одна наша фракція) = (1000px-20px*3-100px-40.02px)/3=266.66px */
    grid-template-columns: 100px auto 2fr 1fr;
    /*?_(6-1) ❗️❗️ <div class="grid-item">2-Ggid</div> */
}


/* ! */
/* .part_7 {
    display: none;
} */
/*! 7.Функція repeat в СSS Grid */
.part_7 .container {
    width: 1000px;
    margin: 0 auto;
    display: grid;
    gap: 20px;
    
    /*?_(1)_  4 (чотири) колонки з однаковою шириною 200px*/
    /* grid-template-columns: 200px 200px 200px 200px; */
    /*?_(2)_  4 (чотири) колонки з однаковою шириною 200px*/
    /* grid-template-columns: repeat(4, 200px); */
    /*?_(3)_ 4 (чотири) колонки з однаковою шириною = 1fr (одна наша фракція) = 235px */
    /*?     ❗️ 1fr (фракція, одиниця гнучкості) = 1 частині доступного простору */
    /*?     ❗️ 1fr (одна наша фракція) = (1000px-20px*3)/4=235px */
    /* grid-template-columns: 1fr 1fr 1fr 1fr; */
    /* grid-template-columns: repeat(4, 1fr); */
    /*?_(3-1)_  4 (чотири) колонки з НЕ однаковою шириною */
    /*?     ❗️❗️❗️ auto працює НЕ ОДНАКОВО з 1fr !!! */
    /*?     ❗️❗️ <div class="grid-item">10 - ширший за всіх!</div> */
    /* grid-template-columns: repeat(4, auto); */
    /*?_(4)_  8 (вісім) колонок з шириною по 100px та 200px послідовно */
    /* grid-template-columns: repeat(4, 100px 200px); */
    /*?_(5)_  5 (п'ять) колонок з шириною 100px 177.33px 177.33px 177.33px 300px */
    /*?     ❗️ 1fr (одна наша фракція) = (1000px-20px*4-100px-300px)/3=177.33px */
    /* grid-template-columns: 100px repeat(3, 1fr) 300px; */
    /*?_(6)_  5 (п'ять) колонок з шириною 100px 260px 260px 260px 40px(або 353.55px) */
    /*?     ❗️ 1fr (одна наша фракція) = (1000px-20px*4-100px-40px)/3=260px */
    grid-template-columns: 100px repeat(3, 1fr) auto;
}


/* ! */
/* .part_8 {
    display: none;
} */
/*! 8.Розміщення елементів всередині Grid-контейнера */
.part_8 > img {
    margin: 0 auto 50px;
    border-radius: 25px;
    box-shadow: 6px 6px 8px #333333;
}

.part_8 .container {
    width: 1000px;
    margin: 0 auto;
    display: grid;
    gap: 20px;
    box-shadow: 6px 6px 8px #333333;
    
    /** Встановлюємо сітку контейнера */
    /*? 4 (чотири) колонки з однаковою шириною */
    grid-template-columns: repeat(4, 1fr);
    /*todo 3 (три) рядки з однаковою висотою 150px */
    grid-template-rows: repeat(3, 150px);
}

/** Задаємо розміщення кожного елемента */
.part_8 .container > .header {
    /*? розміщення .header по КОЛОНКАМ */
    /* grid-column-start: 1; */
    /* grid-column-end: 5; */
    /*? скорочений запис: */
    /* grid-column: 1 / 5;  */
    /*todo розміщення .header по РЯДКАМ */
    /* grid-row-start: 1; */
    /* grid-row-end: 2; */
    /*? скорочений запис: */
    /* grid-row: 1 / 2; */
    /** короткий запис з grid-area */
    /* * grid-area: row-start / column-start / row-end / column-end; */
    grid-area: 1 / 1 / 2 / 5;
    background-color: lightsalmon;
}

.part_8 .container > .main {
    /*? розміщення .main по КОЛОНКАМ */
    /* grid-column: 1 / 3; */
    /*todo розміщення .main по РЯДКАМ */
    /* grid-row: 2 / 3; */
    /** короткий запис з grid-area */
    /* * grid-area: row-start / column-start / row-end / column-end; */
    grid-area: 2 / 1 / 3 / 3;
    background-color: lightskyblue;
}

.part_8 .container > .aside {
    /*? розміщення .aside по КОЛОНКАМ */
    /* grid-column: 4 / 5; */
    /*todo розміщення .aside по РЯДКАМ */
    grid-row: 2 / 3;
    /*todo можна задавати Від'ємні значення */
    /* grid-row: -3 / -2; */
    /* grid-row: -2 / -3; */
    /** короткий запис з grid-area */
    /* * grid-area: row-start / column-start / row-end / column-end; */
    grid-area: 2 / 4 / 3 / 5;
    background-color: lightcoral;
}

.part_8 .container > .footer {
    /*? розміщення .footer по КОЛОНКАМ */
    /* grid-column: 1 / 5; */
    /*todo розміщення .footer по РЯДКАМ */
    /* grid-row: 3 / 4; */
    /** короткий запис з grid-area */
    /* * grid-area: row-start / column-start / row-end / column-end; */
    grid-area: 3 / 1 / 4 / 5;
    background-color: darkseagreen;
}


/* ! */
/* .part_9 {
    display: none;
} */
/*! 9.Властивості auto-fill та auto-fit */
.part_9 .container {
    width: 1000px;
    margin: 0 auto;
    display: grid;
    gap: 20px;
    
    /*?_(1)_ 4 (чотири) колонки з однаковою шириною 150px */
    /* grid-template-columns: repeat(4, 150px); */
    /*?_(2)_ 4 (чотири) колонки з однаковою шириною 150px */
    /* grid-template-columns: repeat(auto-fill, 150px); */
    /*?_(3)_ 4 (чотири) колонки з однаковою шириною 150px */
    grid-template-columns: repeat(auto-fit, 150px);
}


/* ! */
/* .part_10 {
    display: none;
} */
/*! 10.Інструкція minmax() */
.part_10 .container {
    /* width: 1000px; */
    margin: 0 auto;
    display: grid;
    gap: 20px;
    
    /*?_(1)_ 4 (чотири або більше) колонки з однаковою з ГНУЧКОЮ шириною min=150px */
    /** Приклад майже респонсивної(чутливої)верстки */
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    /*?_(2)_ 4 (чотири або більше) колонки з однаковою з ГНУЧКОЮ шириною min=150px */
    /** Приклад 100% респонсивної (чутливої) верстки */
    /*?     ❗️auto-fit - Не використовує пусті колонки на відміну від auto-fill */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}


/* ! */
/* .part_10-1 {
    display: none;
} */
/*! 10-1.Приклад використання функції minmax() в grid-template-columns */
.part_10-1 .container {
    /* width: 100%; */
    height: 200px;
    padding: 10px;
    background-color: #b4ffc1;
    
    display: grid;
    gap: 5px;
    /*?_(1-1) Перший елемент із гнучкою шириною, як і вміст */
    /* grid-template-columns: minmax(min-content, max-content) minmax(200px, 1fr) 150px; */
    /*?_(1-2) Елемент такої самої ширини, як і вміст, але не більше 300px - !!! */
    grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px;
    
}

.part_10-1 .container > div {
    padding: 5px;
    background-color: #b6c2ff;
}


/* ! */
/* .part_11 {
    display: none;
} */
/*! 11.Розміщення елементів всередині Grid-контейнера */
.part_11 > img {
    margin: 0 auto 50px;
    border-radius: 25px;
    box-shadow: 6px 6px 8px #213c3d;
}

.part_11 .container {
    /* width: 1000px; */
    /* margin: 0 auto; */
    display: grid;
    gap: 20px;
    box-shadow: 6px 6px 8px #1e245cc2;
    
    /** Встановлюємо сітку контейнера */
    /*? 4 (чотири) колонки з однаковою шириною */
    grid-template-columns: repeat(4, 1fr);
    /*todo 3 (три) рядки з однаковою висотою 150px */
    grid-template-rows: repeat(3, 150px);
    
    /** Робимо розмітку сітки контейнера */
    grid-template-areas:
    /* todo довгі назви елементів */
        /* "header header header header"
        "main main . aside"
        "footer footer footer footer"
        ; */
    /** скорочені назви елементів */
        "h h h h"
        "m m . a"
        "f f f f"
        ;
}

/** Задаємо розміщення кожного елемента */
.part_11 .container > .header {
    /*? розміщення .header по КОЛОНКАМ */
    /* grid-column: 1 / 5; */
    /*todo розміщення .header по РЯДКАМ */
    /* grid-row: 1 / 2;  */
    /** короткий запис з grid-area */
    /* * grid-area: row-start / column-start / row-end / column-end; */
    /* grid-area: 1 / 1 / 2 / 5; */
    background-color: lightsalmon;
    
    /** розміщення main в контейнері */
    /* todo довгі назви елементів */
    /* grid-area: header; */
    /** скорочені назви елементів */
    grid-area: h;
}

.part_11 .container >.main {
    /*? розміщення .main по КОЛОНКАМ */
    /* grid-column: 1 / 3; */
    /*todo розміщення .main по РЯДКАМ */
    /* grid-row: 2 / 3; */
    /** короткий запис з grid-area */
    /* * grid-area: row-start / column-start / row-end / column-end; */
    /* grid-area: 2 / 1 / 3 / 3; */
    background-color: lightskyblue;
    
    /** розміщення main в контейнері */
    /* todo довгі назви елементів */
    /* grid-area: main; */
    /** скорочені назви елементів */
    grid-area: m;
}

.part_11 .container > .aside {
    /*? розміщення .aside по КОЛОНКАМ */
    /* grid-column: 4 / 5; */
    /*todo розміщення .aside по РЯДКАМ */
    /* grid-row: 2 / 3; */
    /** короткий запис з grid-area */
    /* * grid-area: row-start / column-start / row-end / column-end; */
    /* grid-area: 2 / 4 / 3 / 5; */
    background-color: lightcoral;
    
    /** розміщення aside в контейнері */
    /* todo довгі назви елементів */
    /* grid-area: aside; */
    /** скорочені назви елементів */
    grid-area: a;
}

.part_11 .container > .footer {
    /*? розміщення .footer по КОЛОНКАМ */
    /* grid-column: 1 / 5; */
    /*todo розміщення .footer по РЯДКАМ */
    /* grid-row: 3 / 4; */
    /** короткий запис з grid-area */
    /* * grid-area: row-start / column-start / row-end / column-end; */
    /* grid-area: 3 / 1 / 4 / 5; */
    background-color: darkseagreen;
    
    /** розміщення footer в контейнері */
    /* todo довгі назви елементів */
    /* grid-area: footer; */
    /** скорочені назви елементів */
    grid-area: f;
}

/*! Приклад стратегії адаптивної верстки Desktop first: */
/** Змінюємо розмітку сітки контейнера при ширині єкрану ДО 700px */
@media screen and (max-width: 700px) {
    .part_11 .container {
    grid-template-areas:
        "a h h h"
        "a m m m"
        "a f f f"
        ;
    }
}

/** Змінюємо розмітку сітки контейнера при ширині єкрану ДО 500px */
@media screen and (max-width: 500px) {
    .part_11 .container {
    grid-template-areas:
        "h h h h"
        "a m m m"
        "a f f f"
        ;
    }
}


/* ! */
/* .part_12 {
    display: none;
} */
/*! 12.Grid Alignment and Justification */
/*? Загальні властивості до .grid_item */
.part_12 .grid_item {
    font-size: 40px;
    border: 2px solid rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    color: rgba(0, 0, 0, 0.5);
    background-color: #ffa7a7;
}

.part_12 .container {
    width: 1000px;
    height: 600px;
    margin: 0 auto;
    display: grid;
    /* gap: 20px; */
    
    /*? Створюємо 4 (чотири) колонки з однаковою шириною 150px */
    grid-template-columns: repeat(4, 150px);
    /*todo Створюємо 3 (три) рядки з однаковою висотою 150px */
    grid-template-rows: repeat(3, 150px);
    
    /** Додаткові властивості контейнера: */
    /*! justify-items */
    justify-items: stretch; /*todo (значення за замовчуванням) */
    /* justify-items: start; */
    /* justify-items: end; */
    /* justify-items: center; */
    
    /*! align-items */
    align-items: stretch; /*todo (значення за замовчуванням) */
    /* align-items: start; */
    /* align-items: end; */
    /* align-items: center; */
    
    /*! justify-content */
    justify-content: start; /*todo (значення за замовчуванням) */
    /* justify-content: end; */
    /* justify-content: center; */
    /* justify-content: space-between; */
    /* justify-content: space-around; */
    /* justify-content: space-evenly; */
    
    /*! align-content */
    align-content: start; /*todo (значення за замовчуванням) */
    /* align-content: end; */
    /* align-content: center; */
    /* align-content: space-between; */
    /* align-content: space-around; */
    /* align-content: space-evenly; */
}

/** Додаткові властивості елемента: */
.part_12 .item-self {
    /*! justify-self */
    justify-self: stretch; /*todo (значення за замовчуванням) */
    /* justify-self: start; */
    /* justify-self: end; */
    /* justify-self: center; */
    
    /*! align-self */
    align-self: stretch; /*todo (значення за замовчуванням) */
    /* align-self: start; */
    /* align-self: end; */
    /* align-self: center; */
}


/* ! */
/* .part {
    display: none;
} */
/* .part_13 {
    display: none;
} */
/*! 13.Вкладені сітки (Nested Grids) */
/*? Загальні властивості до ЕЛЕМЕНТА КОНТЕЙНЕРА .grid_item */
.part_13 .grid_item {
    font-size: 60px;
    line-height: 1.5;
    border: 5px solid rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    color: rgba(0, 0, 0, 0.5);
    background-color: #ffa7a7;
}

/*? Базові (початкові) властівості Елемента .grid_item-image */
.part_13 .grid_item-image {
    /* ! */
    /* width: 70px; */
    /* height: 70px; */
    text-align: center;
    font-size: 18px;
    line-height: 70px;
    background-color: lightgreen;
}

/*? Базові (початкові) властівості Елемента .grid_item-text */
.part_13 .grid_item-text {
    text-align: center;
    background-color: lightgray;
}

/**     Застосування Nested CSS Grids до КОНТЕЙНЕРА */
/** для створення респонсивної (чутливої) верстки */
.part_13 .container {
    /* width: 1000px; */
    /* margin: 0 auto; */
    display: grid;
    gap: 20px;
    
    /*? 4 (чотири або більше) колонки з однаковою з ГНУЧКОЮ шириною min=150px */
    /*?     ❗️auto-fit - Не використовує пусті колонки на відміну від auto-fill */
    /**     Мінимальна ширина КОНТЕЙНЕРА для створення ЧОТИРЬОХ колонок */
    /** = 660px (=4*150px+3*20px(gap:)) */
    /** Тоді ширина ЕЛЕМЕНТА = 150.14px */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/**     Застосування Nested CSS Grids до ЕЛЕМЕНТА КОНТЕЙНЕРА */
/** для створення респонсивної (чутливої) верстки */
.part_13 .grid_item {
    display: grid;
    gap: 10px;
    
    /*? 1 - 2 (одна або дві) колонки з однаковою з ГНУЧКОЮ шириною min=100px */
    /**     Мінимальна ширина ЕЛЕМЕНТА для створення ДВОХ колонок */
    /** = 220px (=100px+100px+10px(gap:)+2*5px(border)) */
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    /* ! */
    /* justify-items: center; */
    /* align-items: center; */
}


/* ! */
/* .part,
.part-13 {
    display: none;
}  */
/* .part_13-1 {
    display: none;
} */
/*! 13-1.Приклад використання вкладених сіток (Nested Grids) для адаптивної та респонсивної версток */
.part_13-1 {
    min-height: 100vh;
}
/*? Базові властивості до СЕКЦІЇ .skills */
.part_13-1 .skills {
    padding-top: 0px;
    padding-bottom: 50px;
    font-family: "Poppins";
    /* font-family: "Roboto"; */
    font-size: 0.875rem; /*? 14px */
    line-height: 1.5;
    color: #000000;
    background-color: #eddaff;
}

/*? Властивості Адаптивної верстки до КОНТЕЙНЕРА .container */
.part_13-1 .container {
    /* width: 100%; */
    min-width: 320px;
    padding: 0 5px;
    margin: 0 auto;
    outline: 1px solid tomato;
}
/*! Медіа запити */
/*? 360 480 -575- 768 940 1300 1750 */
@media screen and (min-width: 360px) {
    .part_13-1 .container {
        max-width: 360px;
        padding: 0 10px;
        outline: 1px solid green;
    }
}
@media screen and (min-width: 480px) {
    .part_13-1 .container {
        max-width: 480px;
        padding: 0 15px;
        outline: 1px solid red;
    }
}
/* @media screen and (min-width: 575px) {
    .part_13-1 .container {
        max-width: 575px;
        padding: 0 15px;
        outline: 1px solid blue;
    }
} */
@media screen and (min-width: 768px) {
    .part_13-1 .container {
        max-width: 768px;
        padding: 0 20px;
        outline: 1px solid #ffff1d;
    }
}
@media screen and (min-width: 940px) {
    .part_13-1 .container {
        max-width: 940px;
        padding: 0 20px;
        outline: 1px solid orange;
    }
}
@media screen and (min-width: 1300px) {
    .part_13-1 .container {
        max-width: 1300px;
        padding: 0 20px;
        outline: 1px solid lightskyblue;
    }
}
@media screen and (min-width: 1750px) {
    .part_13-1 .container {
        max-width: 1750px;
        padding: 0 20px;
        outline: 1px solid darkred;
    }
}

/*? Базові властивості до ЗАГОЛОВКА Секції .section-title */
.part_13-1 .section-title {
    /* margin-bottom: 10px; */ /*? line-height: 2.5; */
    font-weight: 900;
    /* font-size: 1.5em;  */ /*? 21px */
    line-height: 2.5;
    text-align: center;
    /* outline: 1px solid red; */
}

/**     Застосування Nested CSS Grids до КОНТЕЙНЕРА .list */
/** для створення респонсивної (чутливої) верстки */
.part_13-1 .list.grid-container-main {
    display: grid;
    gap: 20px;

    /* ? 1 - 4 (від одної до чотирьох) колонок з однаковою з ГНУЧКОЮ шириною min=150px */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    /* outline: 1px solid  darkkhaki; */
}

/**     Застосування Nested CSS Grids до ЕЛЕМЕНТА КОНТЕЙНЕРА .item */
/** для створення респонсивної (чутливої) верстки */
.part_13-1 .item.grid-container-card {
    display: grid;
    /* gap: 20px; */

    /*? 1 - 2 (одна або дві) колонки з однаковою з ГНУЧКОЮ шириною min=240px */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    /* ! */
    justify-items: center;
    /* align-items: center; */
    border-radius: 10px;
    background-color: #f5f5f5;
    /* outline: 1px solid blueviolet; */
}

/*? Базові властивості до ТУМБИ (контейнера) Зображення Картки (елемента) .thumb */
.part_13-1 .thumb {
    /* min-width: 204px; */
    /* max-width: 236px; */
    /* width: 240px; */
    width: 200px;
    /* min-height: 154px; */
    /* max-height: 213px; */
    /* height: 240px; */
    height: 200px;
    align-self: center; /* ! тільки на цих Grid-елементах */
    border-radius: 10px;
    /* background-color: #b4edff; */
}

/*? Базові властивості до ЗОБРАЖЕННЯ Картки (елемента) .thumb */
.part_13-1 .thumb>img {
    height: 100%;
    /* width: 100%; */
    /** застосовуємо одну з властивостей object-fit: */
    /* object-fit: fill; */
    /* object-fit: contain; */
    /* object-fit: cover; */
    object-fit: scale-down;
    /* object-fit: none; */
    border-radius: 10px;
    /* background-color: #8be4ff; */
}

/*? Базові властивості до КОНТЕЙНЕРА ТЕКСТОВОГО КОНТЕНТУ Картки (елемента) .wrapper */
.part_13-1 .wrapper {
    padding: 10px;
    display: flex;
    flex-direction: column;
    /* align-self: start; */
    /* background-color: #b7c6ff; */
}

/*? Базові властивості до ЗАГОЛОВКА Картки (елемента) .item-title */
.part_13-1 .item-title {
    /* margin-bottom: 10px; */ /*? line-height: 2.0; */
    /* flex-grow: 1; */ /*? додатковий відступ */
    /* font-weight: 700; */
    /* font-size: 1.17em;;  */ /*? 16.38px */
    line-height: 2.0;
    text-indent: 0.5em;
    color: #263238;
    /* outline: 1px solid red; */
}

/*? Базові властивості до ТЕКСТУ Картки (елемента) .item-text */
.part_13-1 .item-text {
    /* min-height: 168px; */
    margin-bottom: 20px;
    flex-grow: 1;
    /* font-weight: 400; */
    /* font-size: 0.875rem; */ /*? 14px */
    /* line-height: 1.5; */
    color: #8f95a5;
    /* outline: 1px solid red; */
}

/*? Базові властивості до КНОПКИ Картки (елемента) .item-button */
.part_13-1 .item-button {
    display: inline-flex;
    align-self: start; /* ! тільки на цих Flex-елементах */
    padding: 10px 20px;
	font-weight: 500;
    /* font-size: 0.875rem; */ /*? 14px */
    cursor: pointer;
	border-radius: 5px;
	color: #ffffff;
    background-color: #263238;
}


/* ! */
/* .part_14 {
    display: none;
} */
/*! 14.Приклад застосування технології CSS Grid у проекті “Котодім” */
.part_14 .link {
    width: max-content;
    padding: 20px 40px;
    margin: 0 auto;
    display: block;
    font-family: "Poppins";
    font-weight: 700;
    font-size: 1.5rem; /*? 24px */
    line-height: 1.5; /*? 36px */
    /* cursor: pointer; */
	border-radius: 10px;
    border: 1px solid red;
	color: #ffffff;
    background-color: #263238;
    box-shadow: 4px 4px 10px rgba(255, 0, 0, 0.5);
}

.part_14 .link:hover {
    color: yellow;
    border: 3px solid yellowgreen;
    box-shadow: 4px 4px 10px rgba(153, 205, 50, 0.7);
}
.part_14 .link:active {
    color: yellowgreen;
    border: 1px solid yellowgreen;
    box-shadow: 2px 2px 4px rgba(153, 205, 50, 0.7);
}





/*? ______________________________________________________ */
/* ! */
.part_0 {
    display: none;
}

/*! 0.Заголовок */