<main>
<div>
    <div class="bg"></div>
    <section>
        <h1>Weather today</h1>
        Cloudy with a chance of meatballs. Ramenstorms at 3PM that will last for ten minutes. 
    </section>
</div>
</main>

main {
    width: 375px;
    aspect-ratio: 1.5;
    position: relative;
    border-radius: 12px;
    background: center/cover url("photo-1597571063304-81f081944ee8?q=80&w=400");
    box-shadow: 0 0 10px rgba(154 201 255 / 0.6);
    > div {
        border-radius: inherit;
        position: absolute;
        inset: 10px;
        color: white;
        .bg {
            backdrop-filter: blur(10px);
            mask-image: repeating-linear-gradient(90deg, transparent, transparent 2px, white 2px, white 10px);
            width: 100%;
            height: 100%;
            position: absolute; left: 0; top: 0;
            border-radius: inherit;
        }
        section {
            width: 80%;
            height: fit-content;
            position: absolute;
            top: 0; bottom: 0; left: 0; right: 0;
            margin: auto;
            font-size: 1.4em;
            h1 {
                font-size: 1.8em;
                margin: 0;
            }
        }
    }
}
body {
    height: 100vh;
    margin: 0;
    display: grid;
    place-content: center;
    place-items: center;
    font: 12px 'poppins';
    user-select: none;
    -webkit-user-select: none;
}