.callout-images-container {
    margin : 0 calc(50% - 50vw);
    padding: 0 calc((100vw - 1200px) / 2)
}

.callout-images-container .callout-container {
    display              : grid;
    grid-template-columns: repeat(6, 1fr);
    position             : relative;
    margin-bottom        : 2.5em;
}

.callout-images-container .callout-container>img {
    grid-row   : 1 / 1;
    grid-column: 1 / 5;
    z-index    : 0;
    height     : max(100%, 30vh);
    object-fit : cover;

}

.callout-images-container .callout-container.odd>img {
    grid-column: 3 / 7 !important;
}

.callout-images-container .callout-container>.content {
    grid-row       : 1 / 1;
    grid-column    : 3 / 7;
    z-index        : 1;
    padding        : 1.5em;
    margin         : 4.5em;
    margin-right   : 0;
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    background     : var(--dark-blue-custom);
    color          : white;
    opacity        : .9;
    transform      : translate(0);
}

.callout-images-container .callout-container.odd>.content {
    grid-column: 1 / 5 !important;
    margin     : 4.5em 4.5em 4.5em 0;
    transform  : translate(0);
}

.callout-images-container .callout-container>.content .title {}

.callout-images-container .callout-container>.content .body {}

/* MEDIA QUERIES! */

@media (max-width: 500px) {
    .callout-images-container .callout-container>.content {
        grid-column: 3 / 7 !important;
        grid-row   : 2 / 2;
        margin     : 0 !important;
        margin-top : -3em !important;
    }

    .callout-images-container .callout-container>img {
        grid-column: 1 / 5 !important;
    }
}