<div class="ntt--album-cover-images--square">
    <div class="ntt--cr">
        <div class="copy">
            <span class="beware">Beware</span>
            <span class="the">the</span>
            <span class="pixel">Pixel</span>
            <span class="police">Police</span>
        </div>
        <img src="https://source.unsplash.com/1600x900/?police" width="1600" height="900" alt="Unsplash Photo">
    </div>
</div>
body{margin:0;}

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@900&family=Permanent+Marker&display=swap");

.ntt--album-cover-images--square {
    position: relative;
    padding: 0;

    &::before {
        content: "";
        display: block;
        padding-top: calc((1 / 1) * 100%);
        width: 100%;
    }

    > .ntt--cr {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: red;

        &::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            heigt: 100%;
            background-color: black;
            opacity: 0.25;
        }
    }

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: grayscale(1);
        mix-blend-mode: multiply;
    }

    .copy {
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 1;
        padding: 0.25em;
        color: white;
        font-size: 4em;
        font-size: clamp(1em, 15vw, 6em);
        line-height: 1;
        font-family: "Montserrat", sans-serif;

        .beware {
            display: block;
            transform: rotate(-6deg) translatey(-0.25em);
            font-size: 1.25em;
            text-shadow: -.0625em .0625em red;
            font-family: "Permanent Marker", cursive;
        }

        .the {
            display: block;
            text-transform: uppercase;
            vertical-align: middle;
            font-size: 0.5em;
        }

        .pixel,
        .police {
            display: block;
            text-transform: uppercase;
        }
    }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.