/* ----------------- */
/* ----- CARDS ----- */
/* ----------------- */

.card-session-space {
    position: relative;
    padding-right: 8px;
    padding-left: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
    margin-bottom: 1rem;

    .character-box {
        position: absolute;
        z-index: 10;
        top: -1.5rem;
        left: 1.5rem;
        display: flex;
        flex-direction: column;
    }

    .card-inner {
        position: relative;
        display: flex;
        flex-direction: column;
        border-radius: 0.75rem;
        background-color: var(--white);
        min-width: 265px;
        min-height: 390px;
        max-height: 390px;
        box-shadow: 6px 6px 4px black;
        border: 0;

        .card-number {
            position: absolute;
            z-index: 10;
            top: 54px;
            left: 16px;
            color: var(--white);
            font-size:3rem;
            font-weight: bold;
            text-shadow: 0px 2px 8px black;
        }

        .image-container {
            position: relative;
            border-radius: 0.75rem 0.75rem 0px 0px;
            background-color:var(--black);
            overflow: hidden;
            display: flex;

            .card-image {
                width: 100%;
                object-fit: cover;
            }
        }

        .text-container {
            position: relative;
            padding: 0.75rem;
            min-height: 186px;
            max-height: 186px;

            .card-title {
                position: absolute;
                z-index: 5;
                top: -30px;
                left: 16px;
                font-size: 1rem;
                color:var(--white);
                font-weight: bold;
                text-shadow: 0px 2px 8px black;
            }

            .card-text {
                font-size: 1rem;
                color: var(--gray);
                margin-bottom: 0.5rem;
            }
        }

        button.btn-medium {
            margin-top: auto;
            margin-bottom: 0.5rem;
            align-self: center;
        }
    }
}

.card-content {
    background-color: var(--white);
    border-radius: 1rem;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    padding: 1rem;
    margin: 0;

    header {
        position: relative;
        margin-top: 1rem;
    }
}

.card-body {
    border-radius: 1rem;
    padding: 1rem;
}

.session-page {
    z-index: 1;
    top: -36px;
}
/* @media (max-width: 1200px) { .session-page { padding-left: unset; padding-right: unset; } }
   @media (max-width: 992px) { .session-page { padding-left: unset; padding-right: unset; } } */
@media (max-width: 576px) { .session-page { padding-left: unset; padding-right: unset; } }
@media (max-width: 480px) { .session-page { padding-left: unset; padding-right: unset; } }

.character-card {
    border: unset;
    transition: 0.5s;
}

.scene-body {
    padding-left: 4rem;
    padding-right: 4rem;
    padding-top: 3rem;
    padding-bottom: 1rem;
}
@media (max-width: 1200px) { .scene-body { padding-left: 4rem; padding-right: 4rem; padding-top: 3rem; padding-bottom: 1rem; } }
@media (max-width: 992px) { .scene-body { padding-left: 4rem; padding-right: 4rem; padding-top: 3rem; padding-bottom: 1rem; } }
@media (max-width: 576px) { .scene-body { padding-left: 1rem; padding-right: 1rem; padding-top: 1.5rem; padding-bottom: 0.5rem; } }
@media (max-width: 480px) { .scene-body { padding-left: 1rem; padding-right: 1rem; padding-top: 1.5rem; padding-bottom: 0.5rem; } }

.card-img-overlay {
    top: unset;
    padding: 0.5rem;
    h4 { margin-bottom: 0; }
}