/*
A div with a background image with another div inside with text, with blurred background.

Usage:

<div class="blurry-image" style="background: url('img/path.jpg') center/cover no-repeat;">
    <div>
        Lorem ipsum...
    </div>
</div>

Extra options:

  - By default the image has a max-width of 900px. Add the 'blurry-image-full-width'
    class to make it full width.

  - By default the blurred div doesn't occupy the full image div. Add the 'blurry-image-full-height'
    class to make it full height.

  - Add the 'blurry-image-narrower' class to make the blurred div narrower.
*/

div.blurry-image {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    height: 20rem;
    max-width: 900px;
}

div.blurry-image > div {
    padding: 3rem;
    backdrop-filter: blur(3px);
    text-align: center;
    font-weight: bold;
}

html[data-theme="dark"] div.blurry-image > div {
    background-color: rgba(0, 0, 0, 0.5);
}

html[data-theme="light"] div.blurry-image > div {
    background-color: rgba(255, 255, 255, 0.5);
}

/* Extra options: */

div.blurry-image-full-width {
    max-width: 100%;
}

div.blurry-image-full-height > div {
    flex-grow: 1;
}

div.blurry-image-narrower {
    height: 10rem;
}
div.blurry-image-narrower > div {
    padding: 1rem;
}