@import url('/css/global.css');

:root {
    --gradient-2: linear-gradient(to bottom,
    rgba(0, 0, 0, 0) 10%,
    rgba(0, 0, 0, 0.8) 90%
    );
}
.poster {
    background-size: cover;
    background-position: center;

    min-width: 100%;
    aspect-ratio: 3/4;

    .poster-overlay {
        width: 100%;
        height: 100%;
        background: var(--gradient-2);
        display: flex;
        flex-direction: column;
        justify-content: end;
        box-sizing: border-box;
        padding: 24px;
        padding-bottom: 0;

        .poster-title {
            font-size: 32px;
            color: white;
        }

        .info-content {
            padding-top: 12px;
            color: white;
        }
    }
}


.info-overlay {
    display: flex;
    padding: 24px;
    gap: 6px;
    background-color: rgba(0, 0, 0, 0.8);

    .info-top-item {
        border: 1px solid var(--border);
        background-color: #32323200;
        backdrop-filter: blur(5px);
        color: white;
    }

}

.info {
    padding: 24px;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--bg-gray);
    display: flex;
    flex-direction: column;
    gap: 6px;

    .btn {
        box-sizing: border-box;
    }

}

    .info-top {
        display: flex;
        flex-direction: row;
        gap: 6px;
        width: 100%;
        

    }

    .info-top-item, .info-friends {
        padding: 16px;
        width: 100%;
        border: 1px solid black;
        background-color: white;
        box-sizing: border-box;
    }

    .info-title {
        font-size: 12px;
        color: var(--gray);
    }

    .info-content {
        font-size: 16px;
    }
.reviews {
    padding: 24px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 6px;
}