<main>
    <div>
        <section>
            <h1>Weather today</h1>
            Cloudy with a chance of meatballs. Ramenstorms at 3PM that will last for ten minutes.
        </section>
        <p>view details</p>
    </div>
</main>

main {
    width: 375px;
    aspect-ratio: 1.5;
    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);
    position: relative;
    div {
        position: absolute;
        inset: 10px;
        border-radius: inherit;
        background: rgb(255 255 255 / .1);
        backdrop-filter: blur(10px);
        color: white;
        container-type: size;
        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;
            }
        }
        p {
            width: fit-content;
            height: fit-content;
            padding: 6px;
            border-radius: 6px;
            backdrop-filter: brightness(0) contrast(10);
            offset: content-box calc(200cqw + 100cqh) 0deg / -30px 20px;
        }
    }
}

body {
    height: 100vh;
    margin: 0;
    display: grid;
    place-content: center;
    place-items: center;
    font: 12px 'poppins';
    user-select: none;
    -webkit-user-select: none;
}