:root {
    /* *============ CSS-змінні ============ */
    --color-font-body: #416600;
    --color-background-body: #f4d1ff;
    --start-color: blue;
    --end-color: red;
    --start-color8: #ffeb3b;
    --end-color8: #ff5722;
}

body {
    padding: 20px;
    font-family: 'Montserrat', serif;
    font-weight: 700;
    /* font-size: 20px; */
    font-size: 28px;
    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);
}

/* *========================================= */

/*! Контентні зображення */
/*! 1.Властивість object-fit */
.original-img {
    margin: 20px auto;
}
/*! ---------------------------- */
.thumb0 {
    height: 400px;
    width: 400px;
    outline: 4px double red;
}

.thumb0-img {
    display: block;
    height: 100%;
    width: 100%;
    /** задаємо border */
    border: 2px solid #2a2a2a;
    border-radius: 30px;
    /** застосовуємо властивість object-fit: */
    /* object-fit: fill; */
    /* object-fit: contain; */
    /* object-fit: cover; */
    /* object-fit: scale-down; */
    /* object-fit: none; */
}

/*! ----------Original image---------- */
.base {
    width: 480px;
    /* height: 320px; */
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
    outline: 4px double blue;
}

.base>img {
    display: block;
    max-width: 100%;
    /* height: auto; */
    /** задаємо border */
    border: 2px solid #2a2a2a;
    border-radius: 30px;
    /** ❌ застосовуємо властивість object-fit: */
    /* object-fit: fill; */
    /* object-fit: contain; */
    /* object-fit: cover; */
    /* object-fit: scale-down; */
    /* object-fit: none; */
}
/*! __________________________________ */

.container {
    max-width: 800px;
}

.card-set {
    padding: 0;
    margin: 0;
    /* margin-top: -20px; */
    /* margin-left: -20px; */
    display: flex;
    flex-wrap: wrap;
    /* justify-content: center; */
    gap: 40px;
}

.card {
    /* margin: 20px 0 0 20px; */
    /* flex-basis: calc(100% / 2 - 20px); */
    margin: 0;
    flex-basis: calc((100% - 40px) / 2);
    outline: 4px double red;
}

.card,
.base {
    box-shadow: 
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
        0px 1px 1px 0px rgba(0, 0, 0, 0.14), 
        0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    text-align: center;
}

.card>.label,
.base>.label {
    padding: 10px;
    font-size: 20px;
}

.card>.label {
    color: blue;
    font-family: monospace;
    letter-spacing: -0.05em;
}
/* ! +++++++++++++++++++++++ */
.thumb {
    position: relative;
    height: 380px;
    width: 100%;
    
}

.thumb-img {
    display: block;
    height: 100%;
    width: 100%;
    /** задаємо border */
    border: 2px solid #2a2a2a;
    border-radius: 30px;
    /** застосовуємо властивість object-fit: */
    /* object-fit: fill; */
    /* object-fit: contain; */
    /* object-fit: cover; */
    /* object-fit: scale-down; */
    /* object-fit: none; */
}
/* ! _________________________ */

.card:nth-child(1) .thumb-img {
    object-fit: fill;
}

.card:nth-child(2) .thumb-img {
    object-fit: contain;
}

.card:nth-child(3) .thumb-img {
    object-fit: cover;
}

.card:nth-child(4) .thumb-img {
    object-fit: scale-down;
}

.card:nth-child(5) .thumb-img {
    object-fit: none;
}


/*! 2.Властивість object-position */
.container2 {
    max-width: 800px;
}

.card-set2 {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: -20px;
    margin-left: -20px;
}

.card2 {
    margin: 20px 0 0 20px;
    flex-basis: calc(100% / 2 - 20px);
}

.card2,
.base2 {
    box-shadow: 
        0px 2px 1px -1px rgba(0, 0, 0, 0.2),
        0px 1px 1px 0px rgba(0, 0, 0, 0.14), 
        0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    text-align: center;
}

.card2>.label2,
.base>.label {
    padding: 10px;
    font-size: 20px;
}

.label2>span {
    display: block;
    text-align: center;
}

/* ! +++++++++++++++++++++++ */
.thumb2 {
    position: relative;
    height: 380px;
    width: 100%;
}

.thumb2>img {
    display: block;
    height: 100%;
    width: 100%;
    /** задаємо border */
    border: 2px solid #2a2a2a;
    border-radius: 30px;
    /** застосовуємо властивість object-fit: */
    /** застосовуємо властивість object-position: */
}
/* ! _________________________ */

.card2:nth-child(1) img {
    object-fit: fill;
    object-position: 50px 50px;
}

.card2:nth-child(2) img {
    object-fit: contain;
    object-position: left bottom;
}

.card2:nth-child(3) img {
    object-fit: cover;
    object-position: 20% 30px;
}

.card2:nth-child(4) img {
    object-fit: scale-down;
    object-position: right top;
}


/*! 3.Декоративні зображенняу — Багатошаровий фон */
.canvas3 {
    width: 1000px;
    height: 400px;
    margin-top: 20px;

    background-image:
        url("https://cdn-icons-png.flaticon.com/512/361/361678.png"),
        url("https://cdn-icons-png.flaticon.com/512/4206/4206277.png"),
        url("https://cdn-icons-png.flaticon.com/512/814/814513.png"),
        url("https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_1280.jpg");

    background-repeat: no-repeat;

    background-size:
        80px,
        100px,
        150px,
        cover;

    background-position:
        top 120px right 130px,
        top 270px left 130px,
        center,
        center;
}


/*! 4.Декоративні зображення — Лінійний градієнт --> */
.tile-set4 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.tile4 {
    height: 200px;
    flex-basis: calc(50% - 10px);
    margin: 5px;
    border-radius: 4px;
    background-color: #9e9e9e;
    text-align: center;
    line-height: 200px;
    color: #fff;
    font-family: monospace;
    font-size: 24px;
    letter-spacing: -0.05em;
    box-shadow:
        0px 2px 1px -1px rgba(0, 0, 0, 0.2),
        0px 1px 1px 0px rgba(0, 0, 0, 0.14),
        0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}

.tile4:nth-child(1) {
    background-image:
        linear-gradient(
            to bottom,
            var(--start-color),
            var(--end-color)
        );
}

.tile4:nth-child(2) {
    background-image:
        linear-gradient(
            to top,
            var(--start-color),
            var(--end-color)
        );
}

.tile4:nth-child(3) {
    background-image:
        linear-gradient(
            to right,
            var(--start-color),
            var(--end-color)
        );
}

.tile4:nth-child(4) {
    background-image:
        linear-gradient(
            to top left,
            var(--start-color),
            var(--end-color)
        );
}


/*! 5.Декоративні зображення — Колорстоп (color-stop) --> */
.linear-gradient5 {
    width: 95vw;
    height: 90vh;
    background-image:
        linear-gradient(
            to right,
            #f44336 15%,
            #09792b 40%,
            #00b9ff 65%,
            #ffb800
        );
    outline: 4px double blueviolet;
}


/*! 6.Декоративні зображення — Суцільний градієнт-1 --> */
.gradient6 {
    width: 95vw;
    height: 90vh;
    background-image:
        linear-gradient(
            to right,
            #f44336 15%,
            #09792b 15%,
            #09792b 40%,
            #00b9ff 40%,
            #00b9ff 65%,
            #ffb800 65%
        );
}


/*! 7.Декоративні зображення — Суцільний градієнт-1 --> */
.tile-set7 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.tile7 {
    height: 200px;
    flex-basis: calc(50% - 10px);
    margin: 5px;
    border-radius: 4px;
    background-color: #9e9e9e;
    text-align: center;
    line-height: 200px;
    color: #fff;
    font-family: monospace;
    font-size: 24px;
    letter-spacing: -0.05em;
    box-shadow: 
        0px 2px 1px -1px rgba(0,0,0,0.2), 
        0px 1px 1px 0px rgba(0,0,0,0.14), 
        0px 1px 3px 0px rgba(0,0,0,0.12);
}

.tile7:nth-child(1) {
    background-image: 
        linear-gradient(
            to bottom,
            #f44336 15%,
            #09792b 15%,
            #09792b 40%,
            #00b9ff 40%,
            #00b9ff 65%,
            #ffb800 65%
        );
}

.tile7:nth-child(2) {
    background-image: 
        linear-gradient(
            to top,
            #f44336 15%,
            #09792b 15%,
            #09792b 40%,
            #00b9ff 40%,
            #00b9ff 65%,
            #ffb800 65%
        );
}

.tile7:nth-child(3) {
    background-image: 
        linear-gradient(
            to bottom right,
            #f44336 15%,
            #09792b 15%,
            #09792b 40%,
            #00b9ff 40%,
            #00b9ff 65%,
            #ffb800 65%
        );
}

.tile7:nth-child(4) {
    background-image: 
        linear-gradient(
            to top left,
            #f44336 15%,
            #09792b 15%,
            #09792b 40%,
            #00b9ff 40%,
            #00b9ff 65%,
            #ffb800 65%
        );
}


/*! 8.Декоративні зображення — Радіальний градієнт --> */
.tile-set8 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.tile8 {
    height: 200px;
    flex-basis: calc(50% - 10px);
    margin: 5px;
    border-radius: 4px;
    background-color: #9e9e9e;

    text-align: center;
    line-height: 200px;
    color: #212121;
    font-family: monospace;
    font-size: 24px;
    letter-spacing: -0.05em;

    box-shadow: 
        0px 2px 1px -1px rgba(0, 0, 0, 0.2), 
        0px 1px 1px 0px rgba(0, 0, 0, 0.14), 
        0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}

.tile8:nth-child(1) {
    background-image: 
        radial-gradient(
            at center,
            var(--start-color8) 10%,
            var(--end-color8) 50%
        );
}

.tile8:nth-child(2) {
    background-image: 
        radial-gradient(
            circle at center,
            var(--start-color8) 10%,
            var(--end-color8) 50%
        );
}

.tile8:nth-child(3) {
    background-image: 
        radial-gradient(
            circle at top right,
            var(--start-color8) 10%,
            var(--end-color8) 50%
        );
}

.tile8:nth-child(4) {
    background-image: 
        radial-gradient(
            circle at bottom left,
            var(--start-color8) 10%,
            var(--end-color8) 50%
        );
}


/*! 9.Декоративні зображення — Суцільний радіальний градієнт --> */
.tile-set9 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.tile9 {
    height: 200px;
    flex-basis: calc(50% - 10px);
    margin: 5px;
    border-radius: 4px;
    background-color: #9e9e9e;
    text-align: center;
    line-height: 200px;
    color: #fff;
    font-family: monospace;
    font-size: 24px;
    letter-spacing: -0.05em;
    box-shadow: 
        0px 2px 1px -1px rgba(0,0,0,0.2), 
        0px 1px 1px 0px rgba(0,0,0,0.14), 
        0px 1px 3px 0px rgba(0,0,0,0.12);
}

.tile9:nth-child(1) {
    background-image: 
        radial-gradient(
            ellipse at center,
            #f44336 15%,
            #09792b 15%,
            #09792b 40%,
            #00b9ff 40%,
            #00b9ff 65%,
            #ffb800 65%
        );
}

.tile9:nth-child(2) {
    background-image: 
        radial-gradient(
            circle at center,
            #f44336 15%,
            #09792b 15%,
            #09792b 40%,
            #00b9ff 40%,
            #00b9ff 65%,
            #ffb800 65%
        );
}

.tile9:nth-child(3) {
    background-image: 
        radial-gradient(
            circle at top right,
            #f44336 15%,
            #09792b 15%,
            #09792b 40%,
            #00b9ff 40%,
            #00b9ff 65%,
            #ffb800 65%
        );
}

.tile9:nth-child(4) {
    background-image: 
        radial-gradient(
            circle at bottom right,
            #f44336 15%,
            #09792b 15%,
            #09792b 40%,
            #00b9ff 40%,
            #00b9ff 65%,
            #ffb800 65%
        );
}


/*! 10.Декоративні зображення — Повторюваний градієнт */
.tile-set10 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.tile10 {
    height: 200px;
    flex-basis: calc(50% - 10px);
    margin: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #9e9e9e;
    text-align: center;
    line-height: 200px;
    color: #fff;
    font-family: monospace;
    font-size: 24px;
    letter-spacing: -0.05em;
    box-shadow: 
        0px 2px 1px -1px rgba(0,0,0,0.2), 
        0px 1px 1px 0px rgba(0,0,0,0.14), 
        0px 1px 3px 0px rgba(0,0,0,0.12);
}

.tile10:nth-child(1) {
    background-image: 
        repeating-linear-gradient(
            to right,
            var(--start-color),
            var(--start-color) 20px,
            var(--end-color) 20px,
            var(--end-color) 40px
        );
}

.tile10:nth-child(2) {
    background-image: 
        repeating-linear-gradient(
            to bottom,
            var(--start-color),
            var(--start-color) 20px,
            var(--end-color) 20px,
            var(--end-color) 40px
        );
}

.tile10:nth-child(3) {
    background-image: 
        repeating-linear-gradient(
            to top right,
            var(--start-color),
            var(--start-color) 20px,
            var(--end-color) 20px,
            var(--end-color) 40px
        );
}

.tile10:nth-child(4) {
    background-image: 
        repeating-linear-gradient(
            to bottom right,
            var(--start-color),
            var(--start-color) 20px,
            var(--end-color) 20px,
            var(--end-color) 40px
        );
}

.tile10:nth-child(5) {
    background-image: 
        repeating-radial-gradient(
            circle at center,
            var(--start-color),
            var(--start-color) 20px,
            var(--end-color) 20px,
            var(--end-color) 40px
        );
}
.tile10:nth-child(6) {
    background-image: 
        repeating-radial-gradient(
            circle at top right,
            var(--start-color),
            var(--start-color) 20px,
            var(--end-color) 20px,
            var(--end-color) 40px
        );
}

/*! 11.Декоративні зображення — Смугасті заголовки​​ */
.post11 {
    box-shadow: 
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14), 
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}

.post11 + .post11 {
    margin-top: 20px;
}

.post-title11 {
    margin: 0;
    padding: 16px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

.post-text11 {
    padding: 16px;
    margin-top: 10px;
    color: #212121;
    font-size: 20px;
}

.post-title11.angled11 {
    color: #fff;
    background-image: 
        repeating-linear-gradient(
            -45deg,
            #606dbc,
            #606dbc 10px,
            #465298 10px,
            #465298 20px
        );
}

.post-title11.vertical11 {
    background-image: 
        repeating-linear-gradient(
            to right,
            #f6ba52,
            #f6ba52 10px,
            #ffd180 10px,
            #ffd180 20px
        );
}

.post-title11.radial11 {
    color: #fff;
    background-image: 
        repeating-radial-gradient(
            circle,
            purple,
            purple 10px,
            #4b026f 10px,
            #4b026f 20px
        );
}


/*! 12.Тінь елементу (box-shadow)​ */
.container12 {
    margin: 20px auto;
    display: flex;
    justify-content: center;
    gap: 40px;
}

.post12 {
    position: relative;
    max-width: 400px;
    padding: 20px;
    font-size: 1.2rem;
    border-radius: 4px;
    line-height: 1.5;
    font-family: sans-serif;
    background-color: #fff;
    
}

.post12:not(:first-child) {
    box-shadow: 16px 16px 12px 6px rgba(0, 0, 0, 0.3);
}

.post-text12 {
    margin-top: 10px;
    color: #212121;
    font-size: small;
}


/*! 13.Тінь з однієї сторони (box-shadow)​ */
.card-set13 {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.post13 {
    flex-basis: calc(50% - 30px);
    min-width: 320px;
    padding: 20px;
    border-radius: 4px;
    line-height: 1.5;
    font-family: sans-serif;
    background-color: #fff;
}
.post13:nth-child(1) {
    box-shadow: 0 10px 5px 0px rgba(0, 0, 0, 0.3);
}
.post13:nth-child(2) {
    box-shadow: 10px 0 5px 0px rgba(0, 0, 0, 0.3);
}
.post13:nth-child(3) {
    box-shadow: -10px 0 5px 0px rgba(0, 0, 0, 0.3);
}
.post13:nth-child(4) {
    box-shadow: 0 -10px 5px 0px rgba(0, 0, 0, 0.3);
}

.post-title13 {
    margin-bottom: 15px;
    text-align: center;
}

.post-text13 {
    color: #212121;
    font-size: small;
}


/*! 14.Внутрішня тінь (box-shadow)​ */
.post14 {
    margin: 20px auto;
    max-width: 600px;
    padding: 30px;
    border-radius: 4px;
    line-height: 1.5;
    font-family: sans-serif;
    background-color: #fff;
    box-shadow: inset 0 0 16px 8px rgba(0, 0, 0, 0.3);
}

.post-title14 {
    margin-bottom: 15px;
    text-align: center;
}

.post-text14 {
    color: #212121;
    font-size: small;
}


/*! 15.Багатошарова тінь (box-shadow)​ */
.post15 {
    margin: 20px auto;
    max-width: 600px;
    padding: 20px;
    border-radius: 4px;
    line-height: 1.5;
    font-family: sans-serif;
    background-color: #fff;
    box-shadow:
        /* inset 0 0 16px 8px rgba(0, 0, 0, 0.3), */
        0 2.8px 2.2px rgba(0, 0, 0, 0.034),
        0 6.7px 5.3px rgba(0, 0, 0, 0.048), 
        0 12.5px 10px rgba(0, 0, 0, 0.06),
        0 22.3px 17.9px rgba(0, 0, 0, 0.072), 
        0 41.8px 33.4px rgba(0, 0, 0, 0.086),
        0 100px 80px rgba(0, 0, 0, 0.12);
}

.post-title15 {
    margin-bottom: 15px;
    text-align: center;
}

.post-text15 {
    color: #212121;
    font-size: small;
}

/*! 16.Кольорова багатошарова тінь (box-shadow)​ */
.post16 {
    margin: 20px auto;
    max-width: 600px;
    padding: 20px;
    border-radius: 4px;
    line-height: 1.5;
    font-family: sans-serif;
    background-color: #fff;
    box-shadow:
        /* inset 0 0 16px 8px rgba(0, 0, 0, 0.3), */
        0 2.8px 2.2px red, 
        0 6.7px 5.3px blue, 
        0 12.5px 10px green,
        0 22.3px 17.9px purple, 
        0 41.8px 33.4px orange, 
        0 100px 80px teal;
}

.post-title16 {
    margin-bottom: 15px;
    text-align: center;
}

.post-text16 {
    color: #212121;
    font-size: small;
}


/*! 17.Ефект візуально загнутих кутів картки (box-shadow)​ */
.post17 {
    margin: 20px auto;
    position: relative;
    max-width: 600px;
    padding: 20px;
    border-radius: 4px;
    line-height: 1.5;
    font-family: sans-serif;
    background-color: #fff;
}

.post17:before,
.post17:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    left: 10px;
    width: 50%;
    top: 80%;
    max-width: 300px;
    background: #777;
    box-shadow: 0 15px 10px #777;
    transform: rotate(-3deg);
    outline: 1px solid red;
}

.post17:after {
    transform: rotate(3deg);
    right: 10px;
    left: auto;
}

.post-title17 {
    margin-bottom: 15px;
    text-align: center;
}

.post-text17 {
    font-size: small;
    color: #212121;
}