@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

.html, .body div {
    display: grid;
}

.html {
    min-height: 100%; /* so it covers entire viewport */
}

.body {
    --s: 4px; /* set this as a CSS variable to modify later in media queries */
    --o: calc(0.5 * var(--s));
    background: url(https://images.unsplash.com/photo-1530533609496-06430e875bbf?w=1600) 50% / cover;
    /* Set here because of Safari bug 🪲 267185 */
    font: clamp(5em, min(40vh, 15vw), 39em) / 0.75 'Bebas Neue', sans-serif;
}

@media (min-width: 480px) and (min-height: 320px) {
    .body {
        --s: 6px;
    }
}

.body div {
    /* Store in CSS variable part of stop list used by two gradients */
    --sl: calc(50% - 0.5px), #0000 calc(50% + 0.5px);
    /* Place div in the middle of `body` grid cell */
    place-self: center;
    /* Place text content in the middle of the grid cell */
    place-content: center;
    /* Values depend on font 🚨 */
    padding: calc((ceil(0.1em / var(--s))) * var(--s)) 0.05em 0 0;
    /* Height as a multiple of stripe background size height */
    height: calc((ceil(1em / var(--s)) * var(--s)) - var(--o));
    /* Background broken in Firefox due to bug 🪲 1481498 */
    background: 
        /* White text fill */
        linear-gradient(22.5deg, #fff var(--sl)) text,
        /* Black cover for stripes in bottom left half */
        linear-gradient(22.5deg, #000 var(--sl)),
        /* Stripes background */
        linear-gradient(#094770 50%, #0000 0) 0 0 / 1% var(--s);
    /* Transparent text to see gradient background fill under */
    color: #0000;
    /* White stroke, same thickness as background lines */
    -webkit-text-stroke: #fff calc(var(--o));
    text-transform: uppercase;
    /* Use body image under black area of `background` */
    mix-blend-mode: screen;
    padding-top: 20px;
}