.block figcaption {margin-bottom: 2px;}
.block figcaption span:first-of-type {grid-column: 1/2;}
@media only screen and (min-width: 768px) {
    .block figcaption span:first-of-type {text-align: end;}
}
.block figcaption span:not(:first-of-type) {grid-column: 2/-1;}


/* TEXT */
.block-text {max-width: 500px;}


/* QUOTE */
.block-quote {max-width: 500px;}
.block-quote span:first-of-type {grid-column: 1/2;}
.block-quote span:not(:first-of-type) {grid-column: 2/-1;}


/* LINK */
.block-link {max-width: 500px;}
.block-link span {grid-column: 1/2;}
.block-link p {grid-column: 2/-1;}


/* IMAGE */
.block-image {margin-top: 4rem;}
.block-image > figcaption {grid-column: 1/-1;}

.block-image .img-horizontal {
    grid-column: 1/-1;
    margin: 0 -1rem;
    width: 100vw;
}
@media only screen and (min-width: 768px) {
    .block-image .img-horizontal {
        width: calc(100% + 1rem);
        translate: 1rem 0;
    }
}

.block-image .img-vertical {
    grid-column: 2/-1;
    margin-right: -1rem;
    width: calc(calc(calc(100vw - 5rem) / 4) * 3 + 3rem); /* (((100vw - margin.gutters) / columns) * columnNumbers + gutters.margin)*/
}
@media only screen and (min-width: 768px) {
    .block-image .img-vertical {
        grid-column: 3/-1;
        width: calc(100% + 1rem);
    }
}


/* GALLERY */
.block-gallery {
    margin-top: 4rem;
    margin-left: -1rem;
    margin-right: -1rem;
}
@media only screen and (min-width: 768px) {
    .block-gallery {
        margin-left: 0;
        margin-right: 0;
    }
}
@media only screen and (min-width: 1024px) {
    .block-gallery {display: flex;}
}

/* Container */
.b-gallery-slideshow {
    min-width: 100vw;
    max-width: 100vw;
    flex-wrap: nowrap;
    scroll-snap-type: x mandatory;
    overflow: hidden;
}
@media only screen and (min-width: 768px) {
    .b-gallery-slideshow {
        min-width: calc(100% + 1rem);
        max-width: calc(100% + 1rem);
    }
}
@media only screen and (min-width: 1024px) {
    .b-gallery-slideshow {
        min-width: calc(100% - calc(calc(100vw - 9rem) / 8) + 1rem);
        max-width: calc(100% - calc(calc(100vw - 9rem) / 8) + 1rem);
    }
}

.block-gallery figure {
    min-width: 100vw;
    max-width: 100vw;
    height: fit-content;
    scroll-snap-align: center;
}
@media only screen and (min-width: 768px) {
    .block-gallery figure {
        min-width: 100%;
        width: 100%;
        max-width: 100%;
    }
}

.block-gallery .img-horizontal {
    grid-column: 1/-1;
    width: 100vw;
}
@media only screen and (min-width: 768px) {
    .block-gallery .img-horizontal {
        width: 100%;
    }
}

.block-gallery .img-vertical {
    grid-column: 2/-1;
    margin-left: 1rem;
    width: calc(calc(calc(100vw - 5rem) / 4) * 3 + 3rem); /* (((100vw - margin.gutters) / columns) * columnNumbers + gutters.margin)*/
}
@media only screen and (min-width: 768px) {
    .block-gallery .img-vertical {
        grid-column: 3/-1;
        width: 100%;
        margin-left: 0;
    }
}
.block-gallery figcaption {grid-column: 1/-1;}

/* Thumbnails */
.b-gallery-thumbnails {
    min-width: 100vw;
    max-width: 100vw;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}
@media only screen and (min-width: 768px) {
    .b-gallery-thumbnails {
        min-width: calc(100% + 1rem);
        max-width: calc(100% + 1rem);
    }
}
@media only screen and (min-width: 1024px) {
    .b-gallery-thumbnails {
        order: 2;
        flex-wrap: wrap;
        flex-direction: column;
        margin-top: calc(1rem + 2px);
        min-width: calc(calc(100vw - 9rem) / 8);
        max-width: calc(calc(100vw - 9rem) / 8);
    }
}

.b-gallery-thumbnail {opacity: .3;}
.b-gallery-thumbnail.active {opacity: 1;}
.b-gallery-thumbnail img {width: auto; height: 6rem;}
@media only screen and (min-width: 1024px) {
    .b-gallery-thumbnail {width: 100%;}
    .b-gallery-thumbnail img {width: 100%; height: auto;}
}


/* VIDEO */
.block-video {margin-top: 4rem;}
.block-video > * {grid-column: 1/-1;}
.block-video iframe {
    width: 100vw;
    margin: 0 -1rem;
}
@media only screen and (min-width: 768px) {
    .block-video iframe {
        width: calc(100% + 1rem);
        margin-right: -1rem;
        translate: 1rem 0;
    }
}