.carousel-container {
    /*базовый контейнер слайдера*/
    position: relative;
    width: 100%;
    width: auto;
    overflow: hidden;
    margin-top: 100px;
    background-color: #121416;

    h2 {
        margin: 0 0 10px 5px;
        color: #DE3D82;
        font-weight: lighter;
        font-size: 25px;
        z-index: 100;
    }
}

.carousel-track {
    /*двигающаяся часть*/
    display: flex;
    transition: transform 0.3s ease;
    /*плавная анимация листания*/
    gap: 10px;
    padding: 0 0 30px 10px;
    /* padding-r: 10px; */
    /* background-color: #15383D; */
    width: max-content;
    /*ширина определяется содержимым*/
}

.carousel-item {
    /*блок фильма*/
    flex: 0 0 auto;
    max-height: 350px;
    width: 250px;
    border-radius: 15px !important;
    overflow: hidden;
}

.carousel-item:hover {
    box-shadow: 0 -10px 20px -5px #17929D,
        /* верхняя тень */
        0 10px 20px -5px #17929D;
    /* нижняя тень */
}

.carousel-item img {
    object-fit: cover;
    /*заполняет но обрезает*/
    width: 100%;
    height: 100%;
    display: block;
}

.carousel-item img:hover {
    transform: scale(1.02);
}

.carousel-btn {
    /*ко всем кнопкам*/
    position: absolute;
    top: 50%;
    transform: translateY(-51%);
    color: #F3FEFF;
    border: none;
    width: auto;
    height: 100%;
    cursor: pointer;
    font-size: 40px;
    z-index: 2;
}

.carousel-btn.prev {
    /*прошлое*/
    left: 0px;
    background: linear-gradient(90deg, #121416 0%, rgba(53, 53, 53, 0) 100%);
}

.carousel-btn.next {
    /*след*/
    right: 0px;
    background: linear-gradient(270deg, #121416 0%, rgba(53, 53, 53, 0) 100%);
}

.carousel-btn:disabled {
    /*нельзя листать*/
    opacity: 0.3;
    cursor: not-allowed;
}

footer {
    align-items: center;
    min-height: 40px;
    width: 100%;
    background-color: #15383D;
    margin-top: 150px;
    padding: 0px;
    padding-top: 10px;
}

#footer-items {
    display: flex;
    justify-content: center;
    gap: 20px;
    font-size: 24px;
    color: #D5F1F3;
    text-align: center;
    width: 100%;

    a {
        text-decoration: none;
        color: #17929D;
    }

    span {
        text-align: center;
    }

    svg {
        border-radius: 6px;
        font-size: 25px
    }
}

@media (max-width: 1024px) {

    .carousel-container {
        /* базовый контейнер слайдера */
        margin-top: 100px;

        h2 {
            font-size: 23px;
        }
    }

    .carousel-track {
        /*двигающаяся часть*/
        gap: 10px;
        padding: 0 0 30px 10px;
    }

    .carousel-item {
        /*блок фильма*/
        max-height: 330px;
        width: 230px;
        border-radius: 15px;
    }

    .carousel-item:hover {
        box-shadow: 0 -10px 20px -5px #17929D,
            /* верхняя тень */
            0 10px 20px -5px #17929D;
        /* нижняя тень */
    }

    footer {
        height: 30px;
        margin-top: 150px;
        padding: 10px;
    }

    #footer-items {
        font-size: 22px;

        svg {
            border-radius: 6px;
            font-size: 25px
        }
    }

}

@media (max-width: 767px) {

    .carousel-container {
        margin-top: 100px;

        h2 {
            margin: 0 0 7px 5px;
            font-size: 20px;
        }
    }

    .carousel-track {
        /*двигающаяся часть*/
        gap: 8px;
        padding: 0 0 30px 8px;
    }

    .carousel-item {
        /*блок фильма*/
        max-height: 300px;
        width: 200px;
        border-radius: 13px;
    }

    .carousel-item:hover {
        box-shadow: 0 -10px 20px -5px #17929D,
            /* верхняя тень */
            0 10px 20px -5px #17929D;
        /* нижняя тень */
    }

    footer {
        height: 23px;
        margin-top: 150px;
        padding: 10px;
    }

}

@media (max-width: 320px) {

    footer {
        height: 15px;
    }

    #footer-items {
        span {
            font-size: 17px;
        }

        svg {
            font-size: 16px
        }
    }
}