/**
 * WP Tutorials : Parallax
 * 
 * https://wp-tutorials.tech/refine-wordpress/parallax-image-scrolling-effect/
 */

.wp-block-image.parallax {
    position: relative;
}

.wp-block-image.parallax figure {
    width: 100%;
}

.wp-block-image.parallax img {
    display: block;
    width: 100%;
    height: 9em;
    object-fit: cover;
}

.wp-block-image.parallax .diagnostics {
    background-color: #00000088;
    position: absolute;
    left: 0;
    top: 0;
    width: 5em;
    padding: 0.25em 0;
    text-align: center;
    font-size: 10pt;
    color: white;
}

@media(min-width: 768px) {
    .wp-block-image.parallax img { height: 15em; }
    .wp-block-column .wp-block-image.parallax img { height: 10em; }
    .wp-block-image.parallax .diagnostics { font-size: 10pt; }
}

@media(min-width: 1024px) {
    .wp-block-image.parallax img { height: 22em; }
    .wp-block-column .wp-block-image.parallax img { height: 15em; }
    .wp-block-image.parallax .diagnostics { font-size: 12pt; }
}