.characters.view > .content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-shrink: 0;
    flex-grow: 0;
    flex-basis: auto;
    padding: var(--spacing-medium);
}

.characters-view-content {
    gap: var(--spacing-medium);
    display: flex;
    flex-direction: column;
}

.characters-view-content ul {
    padding-left: var(--spacing-medium);
    gap: var(--spacing-xx-small);
    display: flex;
    flex-direction: column;
}

.characters-view-content-left,
.characters-view-content-right {
    padding: var(--spacing-medium);
}

.characters-view-content-left {
    width: 65%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-medium);
}

.characters-view-content-right {
    gap: var(--spacing-medium);
    border-left: 1px solid var(--border-color);
    width: 35%;
    display: flex;
    flex-direction: column;
}

.characters-view-image-container {
    background-color: var(--black-color);
}

/* Admin */
.characters.view.admin > .content {
    flex-direction: column;
}

.characters.view.admin h1 {
    padding: 0 var(--spacing-medium);
}

@media (max-width: 900px) {

    .characters.view > .content {
        flex-direction: column;
    }

    .characters-view-content-left,
    .characters-view-content-right {
        width: inherit;
    }

    .characters-view-content-right {
        border-left: inherit;
        border-top: 1px solid var(--border-color);
    }

}