<main>
    <div class="info date">
        <p style="font-size: 3.6em;">28</p>
        <p style="font-size: 1em;">Mon</p>
    </div>
    <div class="info news">
        <header>
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/New_York_Times_T_icon.svg/1530px-New_York_Times_T_icon.svg.png"
                alt="new york times logo">
            <div>science news</div>
        </header>
        <section>
            <h1 style="font-size: 1em;font-weight: 600;">Auroras Spotted on Neptune</h1>
            <p style="font-size: 1em;"> The James Webb Space Telescope identified the lights in the distant
                planet&apos;s
                atmosphere&hellip; </p>
        </section>
    </div>

    <div class="info banner">
        <p>abracadabra</p>
    </div>

    <div class="info recipe">
        <div class="bg"></div>
        <header>
            <h1>Today&apos;s Recipe: Bruschetta</h1>
        </header>

        <ul>
            <li>In a large bowl, mix the onions, tomatoes, garlic and basil, taking care not to mash or break up the
                tomatoes too much.
                Add the balsamic vinegar and extra virgin olive oil&hellip;</li>
            <li>Add salt and pepper to taste. Mix again. Cover and chill for at
                least an hour. This will allow the flavours to soak and blend together&hellip;</li>
        </ul>

    </div>
    <div class="info text" style="width:160px;height:200px;margin-left: auto;">
        <svg>
            <mask id="mask">
                <clipPath id="emojiClipPath">
                    <text x="0" y="80%" font-size="130px">&#x2663;</text>
                </clipPath>
                <rect x="0" y="0" fill="red" width="100%" height="100%" clip-path="url(#emojiClipPath)" />
            </mask>
        </svg>

    </div>
</main>

.info {
    backdrop-filter: blur(10px) brightness(110%);
    box-shadow: inset 0 0 20px rgb(240 240 241 / .2);
    margin-block: 10px;
    border-radius: inherit;
    color: white;

    &.date {
        width: 120px;
        aspect-ratio: 1;
        text-align: center;
        display: flex;
        flex-direction: column;
        place-content: center;
        p { margin: 0; }
    }

    &.news {
        width: 100%;
        padding-inline: 10px;
        padding-block: 3px;
        box-sizing: border-box;

        header {
            display: flex;
            place-content: space-between;
            margin-top: 5px;
            padding-inline: 6px;
            border-radius: 4px;
            background: rgb(240 240 241 / 10%);
            img {
                width: 14px;
                margin-block: 6px;
            }
            div {
                backdrop-filter: contrast(2) drop-shadow(0 0 10px transparent);
                width: 100px;
                padding-inline: 6px;
                border-radius: 4px;
                align-self: center;
                text-align: center;
            }
        }
        section p { margin-top: 0; }
    }

    &.banner {
        height: 3em;
        backdrop-filter: blur(10px) brightness(110%);
        mask-image: repeating-linear-gradient(90deg, transparent, transparent 3px, white 20px, white 25px);
        p {
            margin: 0;
            text-align: center;
            font-size: 2em;
            font-weight: bold;
            text-shadow: 2px 2px 0 navy;
        }
    }

    &.recipe {
        backdrop-filter: none;
        height: 200px;
        position: relative;
        padding-inline: 10px;
        border-left: 2px solid rgb(255 255 255 / .4);
        border-top: 2px solid rgb(255 255 255 / .4);
        .bg {
            backdrop-filter: blur(10px) brightness(110%);
            mask-image: repeating-linear-gradient(0deg, transparent, transparent 2px, white 2px, white 10px);
            width: 100%;
            height: 100%;
            position: absolute; left: 0; top: 0;
            border-radius: inherit;
        }
        h1 {
            isolation: isolate;
            padding-top: 10px;
            font-size: 1em;
            font-weight: 600;
            text-shadow: 2px 2px 0 navy;
        }
        ul {
            isolation: isolate;
            padding: 0;
            list-style-type: none;
            li { margin-bottom: 10px; }
        }
    }

        &.text {
        height: 100px;
        mask-image: url(#mask);
    }
}
main {
    width: 360px;
    height: 680px;
    padding: 10px;
    border-radius: 12px;
    box-sizing: border-box;
    box-shadow: 0 0 6px #777;
    background: center/cover url("photo-1726044781946-fca0baa0cdcd?q=80&w=400");
}
body {
    height: 100vh;
    overflow: hidden;
    margin: 0;
    display: grid;
    place-content: center;
    place-items: center;
    font: 12px 'poppins';
    user-select: none;
    -webkit-user-select: none;
}