.ns-callout *{
    box-sizing: border-box;
    font-family: 'proxima-nova', 'OpenSans', 'Pridi', 'NotoSans', 'NotoSansSC', 'NotoSansHebrew', 'NotoSansJapanese', 'Hiragino Kaku Gothic Pro', 'Yu Gothic Medium', 'Yu Gothic', Meiryo, 'source-han-sans-japanese', 'source-han-sans-korean', 'source-han-sans-simplified-c', Helvetica, Arial, sans-serif !important;
}
.ns-callout{
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    max-width: 100vw;
}
.ns-callout__media{
    margin-bottom: 25px;
}
.ns-callout__media.show-gallery{
    overflow: hidden;
}
.ns-callout__media.show-collage{
    margin-right: 15px;
    grid-template-rows: 100%;
    /*max-height: 155px;*/
}
.ns-callout.flip .ns-callout__media.show-collage{
    margin-left: 15px;
    margin-right: 0;
}

/*.ns-callout__media{ grid-template-areas: "imageOne"; }*/

.ns-callout__media > :nth-child(1){ grid-area: imageOne; }
.ns-callout__media > :nth-child(2){ grid-area: imageTwo; }
.ns-callout__media > :nth-child(3){ grid-area: imageThree; }

.ns-callout ns-image{ height: inherit; }

.ns-callout__copy{
    padding: 0 15px;
}
.ns-callout__copy-container{
    max-width: 600px;
}
.ns-callout__copy h2{
    font-size: 22px;
    line-height: 27px;
    font-weight: 300;
    margin-top: 0;
    margin-bottom: 15px;
}
.ns-callout__copy p{
    margin: 0;
    font-size: 18px;
    line-height: 24px;
    font-weight: 300;
}
.ns-callout__copy ns-button{
    margin-top: 20px;
}
@media (max-width: 767px) {
    .ns-callout__media{ grid-template-rows: -webkit-max-content; }
    .ns-callout__media > :not(:first-child){ display: none; }
    .ns-callout__media ns-image{
        --ns-image-object-fit: contain !important;
        height: 100%;
        min-height: 100%;
    }
    .ns-callout:not(.flip) .ns-callout__media ns-image{ --ns-image-object-position: left !important; }
    .ns-callout.flip .ns-callout__media ns-image{ --ns-image-object-position: right !important; }
}
@media (min-width: 768px) {

    .ns-callout .ns-callout__media,
    .ns-callout.flip .ns-callout__media{
        grid-gap: 10px;
        margin-bottom: 0;
        padding-left: 0;
        padding-right: 0;
    }
    .ns-callout__media.show-collage{
        display: grid;
        grid-gap: 5px;
        height: 355px;
        max-height: 100%;
    }
    .ns-callout__media.show-collage.image-count--3{
        grid-template-rows: repeat(2, 50%);
    }

    .ns-callout .ns-callout__media.show-collage,
    .ns-callout .ns-callout__copy{
        margin-left: 80px;
        margin-right: 0;
    }
    .ns-callout.flip .ns-callout__media.show-collage,
    .ns-callout.flip .ns-callout__copy{
        margin-left: 0;
        margin-right: 80px;
    }
    .ns-callout__media ns-image{
        height: 100%;
    }
    .ns-callout__media.image-count--1 ns-image{
        height: inherit;
    }


    .ns-callout__media.image-count--1{ grid-template-areas: "imageOne"; }
    .ns-callout__media.image-count--2{ grid-template-areas: "imageOne imageOne imageTwo"; }
    .ns-callout__media.image-count--3{ grid-template-areas: "imageOne imageOne imageTwo" "imageOne imageOne imageThree"; }

    .ns-callout__media.mirror-collage-layout.image-count--2{ grid-template-areas: "imageTwo imageOne imageOne"; }
    .ns-callout__media.mirror-collage-layout.image-count--3{ grid-template-areas: "imageTwo imageOne imageOne" "imageThree imageOne imageOne"; }

    .ns-callout__copy-container{
        margin-top: 40px;
        max-width: 360px;
    }
    .ns-callout.flip .ns-callout__copy-container{
        margin-right: 0;
        margin-left: auto;
    }
    .ns-callout.flip .ns-callout__media.show-gallery + .ns-callout__copy .ns-callout__copy-container{
        margin-left: 0;
        margin-right: auto;
    }
    .ns-callout__copy h2{
        margin-top: 0;
        font-size: 40px;
        line-height: 43px;
        font-weight: 100;
    }
}
@media (min-width: 1024px) {
    .ns-callout{
        flex-direction: row;
        max-width: 1024px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 15px;
        padding-right: 15px;
    }
    .ns-callout.flip{
        flex-direction: row-reverse;
    }
    .ns-callout .ns-callout__media.show-collage,
    .ns-callout .ns-callout__copy{
        margin-left: 15px;
    }
    .ns-callout.flip .ns-callout__media.show-collage,
    .ns-callout.flip .ns-callout__copy{
        margin-left: 15px;
        margin-right: 15px;
    }
    .ns-callout .ns-callout__media,
    .ns-callout.flip .ns-callout__media{
        grid-gap: 15px;
        width: 60%;
        min-width: 60%;
    }
    .ns-callout__media.show-collage{
        min-height: 355px;
        height: auto;
    }
    .ns-callout__media.show-gallery{
        margin-left: 15px;
    }
    .ns-callout.flip .ns-callout__media.show-gallery{
        margin-right: 15px;
        margin-left: 0;
    }
    .ns-callout__copy{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex-grow: 1;
        margin: 0 auto;
        padding-top: 15px;
        padding-bottom: 15px;
    }
    .ns-callout .ns-callout__copy-container,
    .ns-callout.flip .ns-callout__copy-container{
        margin-top: 0;
        margin-left: auto;
        margin-right: auto;
        max-width: 320px;
    }
}
@media (min-width: 1440px) {
    .ns-callout{
        max-width: 1440px;
    }
    .ns-callout .ns-callout__media{
        min-height: 390px;
    }
}

.mT--none{ padding-top: 0; }
.mT--xs{ padding-top: 20px; }
.mT--sm{ padding-top: 40px; }
.mT--md{ padding-top: 60px; }
.mT--lg{ padding-top: 80px; }

.mB--none{ padding-bottom: 0; }
.mB--xs{ padding-bottom: 20px; }
.mB--sm{ padding-bottom: 40px; }
.mB--md{ padding-bottom: 60px; }
.mB--lg{ padding-bottom: 80px; }

.ns-callout h2:empty,
.ns-callout p:empty,
.ns-callout ns-button:empty{
    display: none;
}