/* Основной блок с фильмами ========================================================*/
.posters-grid {
    overflow: auto;
    height: 100%;

}


.poster-container.hidden {
    display: none;
}


.poster-container {
    display: block;
    padding: 0;
    margin: 0.5rem;
    height: 16em;
    width: 10em;
    border: 0.5em solid rgba(0, 0, 0, 0);
    border-radius: 2%;
    position: relative;


    &:hover {
        border: 0.5em solid var(--black-color);
        box-shadow: 10px 5px 5px black;

        .poster-settings {
            visibility: visible;
        }

        .poster-img {
            box-shadow: none;
        }
    }

    @media (min-width: 2500px) {
        height: 23em;
        width: 14em;

    }

    @media (min-width: 3000px) {
        height: 32em;
        width: 20em;

    }

}

.poster-img {
    width: 100%;
    height: 13em;

    box-shadow: 10px 5px 5px black;

    @media (min-width: 2500px) {
        height: 20em;
    }

    @media (min-width: 3000px) {
        height: 27em;
    }
}

.poster-settings {
    visibility: hidden;
    background-color: var(--black-color);
    height: 2em;
    display: flex;
    justify-content: space-evenly;
    align-items: end;


    img {
        height: 85%;

        &:hover {
            cursor: pointer;

        }

    }

    @media (min-width: 2500px) {
        height: 3em;
    }
    @media (min-width: 3000px) {
        height: 4em;
    }
}

/* Карточка в правой части ========================================================*/

.card-img {
    width: 20em;
    height: 26em;
    border: 0.5em solid var(--white-color);
    outline: 1em solid var(--black-color);
    margin-top: 1em;
    object-fit: cover;

    @media (min-width: 3000px) {
        width: 24em;
        height: 31em;
    }

    @media (min-width: 3000px) {
        width: 42em;
        height: 60em;
    }
}

.card-title {
    margin: 1rem;
    color: var(--red-color);
    font-size: 1.5em;

    @media (min-width: 2500px) {
        font-size: 2.9em;
    }
    @media (min-width: 3000px) {
        font-size: 4.5em;
    }
}


.card-description-hidden {
    overflow: hidden;
    text-overflow: ellipsis;

    display: inline;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
}

.card-container {
    height: 100%;

    @media (min-width: 2500px) {
        margin-right: 1em;
        h3, p {
            font-size: 1.9em;
        }
    }

    @media (min-width: 3000px) {
        margin-right: 1em;
        h3, p {
            font-size: 3em;
        }
    }

}