:root {
    /* *============ ПЕРЕМЕННЫЕ ЦВЕТА body ============ */
    --color-font-body: #277600;
    --color-background-body: #ffdef9;
    /* *============================================== */
}

/* *,
*::before,
*::after {
    box-sizing: border-box;
} */

/* ?============================================== */
body {
    color: var(--color-font-body);
    background-color: var(--color-background-body);
    font-family: sans-serif;
    padding: 10px;
}
/* ?============================================== */

.box {
    width: 150px;
    height: 150px;
    /* display: block; */
    /* display: inline-block; */
    background-color: rgb(255, 255, 119);
    outline: 1px dotted green;

    /** align-content */
    /* align-self: auto; */
    /* align-self: flex-start; */
    /* align-self: flex-end; */
    /* align-self: center; */
}

.box-parent-flex {
    width: 600px;
    height: 600px;
    padding: 5px;
    margin-bottom: 20px;

    /* display: flex; */
    /** flex-direction */
    /* flex-direction: row; */
    /* flex-direction: row-reverse; */
    /* flex-direction: column; */
    /* flex-direction: column-reverse; */

    /** justify-content */
    /* justify-content: flex-start; */
    /* justify-content: center; */
    /* justify-content: flex-end; */
    /* justify-content: space-between; */
    /* justify-content: space-around; */
    /* justify-content: space-evenly; */

    /** align-items */
    /* align-items: stretch; */
    /* align-items: center; */
    /* align-items: flex-start; */
    /* align-items: flex-end; */
    /* align-items: baseline; */

    /** flex-wrap */
    /* flex-wrap: nowrap; */
    /* flex-wrap: wrap; */
    /* flex-wrap: wrap-reverse; */

    /** align-content */
    /** для багаторядкового контейнера */
    /* align-content: stretch; */
    /* align-content: center; */
    /* align-content: flex-start; */
    /* align-content: flex-end; */
    /* align-content: space-between; */
    /* align-content: space-around; */
    /* align-content: space-evenly; */

    background-color: rgb(158, 245, 255);
    outline: 2px solid tomato;
}



.box-parent-inline-flex {
    padding: 5px;
    display: inline-flex;

    /* flex-direction: row; */
    /* flex-direction: row-reverse; */
    /* flex-direction: column; */
    /* flex-direction: column-reverse; */

    border: 1px solid rgb(71, 218, 255);
    background-color: rgb(255, 171, 171);
    margin-bottom: 10px;
}

/** +++++++++ box-list ++++++++ */
.box-item {
    width: 100px;
    height: 100px;
    /* margin-right: 10px; */
    background-color: rgb(255, 255, 119);
    outline: 1px dotted green;
}

.box-list {
    width: 320px;
    /* height: 640px; */
    display: flex;
    /* flex-direction: column; */
    flex-wrap: wrap;
    /* gap: 10px; */
    column-gap: 10px;
    row-gap: 20px;
    
    /* padding: 5px; */
    /* margin-bottom: 20px; */
    background-color: rgb(158, 245, 255);
    outline: 2px solid tomato;
}












/* ! +++++++++ слайдер ++++++++ */
.slider-container {
    /* ! */
    display: none;
    position: relative;
    width: 800px;
    overflow: hidden;
}

.slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slider img {
    width: 100%;
    height: auto;
}

button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}
#prevBtn {
    left: 10px;
}
#nextBtn {
    right: 10px;
}