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

div.blurry-image {
    /* Add the background image in this element like: background: url('img.jpg') center/cover no-repeat */
    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);
}