/* @group Example
------------------------------------ */
.juicer { padding: 11.5rem 0 0; }
.juicer header { margin-bottom: 3.3rem; }
.juicer header h2 { color: var(--med-green); font: var(--header); letter-spacing: var(--header-letterspacing); text-transform: uppercase; }

.juicer .j-stacker { 
    display: grid!important;
    grid-template-rows: repeat(2, auto);
    grid-template-columns: repeat(2, 1fr);
    overflow: hidden;
}
.juicer .j-stack { width: 100%!important; cursor: pointer; }
.juicer .j-image img { width: 100%!important; height: 100%!important; object-fit: cover; object-position: center; }
.juicer .juicer-feed:after { display: none; font-size: 0; }
.juicer p,
.j-overlay p {
    font: 400 2rem / 1.5em var(--nobel-font);
}
.juicer .feed-item, 
.juicer .j-stack, 
.juicer .j-image {
    height: 21.4rem;
    overflow: hidden;
}
.juicer .j-stack {
    height: 42.8rem;
}
.j-overlay .j-close {
    background-position: center!important;
    background-color: var(--header-color)!important;
    width: 30px!important;
    height: 30px!important;
    border-radius: 50%!important;
}

@media only screen
and (min-width : 961px) {
    .juicer .j-stacker {
        grid-template-columns: repeat(4, 1fr);
    }
    .juicer header { margin-bottom: 6.9rem; }
    .juicer header h3 { font: var(--header-desktop); }
    .juicer .feed-item,
    .juicer .j-stack,
    .juicer .j-image {
        height: 43.1rem;
    }
    .juicer .j-stack {
        height: 86.2rem;
    }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
}

/* @end */