@import url(../main.css);
@import url(../base-style.css);
@import url(../structures/basic-layout.css);
@import url(../components/masonry.css);
@import url(../components/covers.css);
@import url(../components/modalbox.css);
@import url(../components/gallery-modal.css);
@import url(../components/breadcrumbs.css);
@import url(../components/buttons.css);
@import url(../components/card-buttons.css);
@import url(../components/slider.css);
@import url(../components/background-carousel.css);

#MainFrame > .content
{
    --outside-horizontal-margin: var(--default-outside-horizontal-margin);
    --outside-vertical-margin: var(--default-outside-vertical-margin);
}

#MainFrame > .content > .description
{
    padding: var(--default-inside-vertical-margin) var(--default-inside-horizontal-margin);
    display: flex;
    flex-direction: column;
    overflow: auto;
}

#MainFrame > .content > .moodboard
{
    overflow: auto;
    padding-right: var(--default-outside-horizontal-margin);
    margin-right: calc(var(--default-outside-horizontal-margin) * -1);
}

#MainFrame > .content .masonry
{
    --columns: 3;
    --left-gap: var(--half-gap);
    --right-gap: var(--card-gap);
    --top-gap: var(--card-gap);
    --bottom-gap: var(--card-gap);
    margin-top: calc(var(--top-gap) * -1);
    margin-right: calc(var(--right-gap) * -1);
}

.headshot
{
    width: 100%;
    padding: 0 var(--default-inside-horizontal-margin);
    margin: var(--row-gap) auto;
    box-sizing: border-box;
}

.headshot > img
{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 800px) {
    #MainFrame > .content > .description,
    #MainFrame > .content > .moodboard
    {
        overflow: initial;
    }

    .headshot
    {
        width: 50%;
    }

    #MainFrame > .content .masonry
    {
        --left-gap: var(--card-gap);
        margin: calc(var(--right-gap) * -1);
    }

    #MainFrame > .content > .moodboard
    {
        padding: var(--default-outside-vertical-margin) 0;
        margin: 0;
    }
}

@media (max-width: 480px) {
    #MainFrame > .content .masonry
    {
        --columns: 2;
    }

    .headshot
    {
        width: 75%;
    }
}

@media (max-width: 360px) {

    .headshot
    {
        width: 100%;
    }

    #MainFrame > .content .masonry
    {
        --columns: 1;
    }
}