.page-content {
    background: linear-gradient(0deg, var(--about-hero-background-color) 25%, var(--about-background-color) 100%);
    display: flex;
    flex: 1 1 0;
}

.hero-image::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    clip-path: polygon(0 35%, 100% 45%, 100% 100%, 0% 100%);
    background: var(--about-hero-background-color);
}

.hero-image {
    text-align: center;
    height: 100vw;
    position: relative;
    filter: drop-shadow(0px -20px 10px rgba(0, 0, 0, 0.1));

    img {
        max-width: 75vw;
        object-fit: cover;
        clip-path: circle(50%);
        aspect-ratio: 1 / 1;
    }
}

.showoff-left {
    position: relative;
    transition: .5s all;
    z-index: 100;
    font-family: 'ShadowsIntoLight';
    display: flex;
    font-size: 1.6em;
    min-height: 300px;
    color: black;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: visible;
    text-transform: capitalize;
    filter: drop-shadow(0px 10px 10px rgba(0,0,0,0.2));
    background: url(../images/textured-torn-paper-for-creative-projects-isolated-transparent-png.webp) center/cover no-repeat;
}

.showoff-right {
    position: relative;
    font-family: 'Mathilde';
    font-size: 5em;
    text-align: center;
    justify-content: center;
    color: var(--about-hero-text-color);
    transition: .5s all;
    background: var(--about-hero-background-color);
}

.hero-blurb-container {
    display: flex;
    flex-direction: column;
    flex: 1 1 100%;
}

.hero-blurb {
    flex: 1 1 100%;
    background: var(--about-hero-background-color);
    color: var(--about-hero-text-color);
    padding: 1em;
    line-height: 2.5em;
}


@media screen and (min-width: 500px) {
    .hero-image {
        height: auto;
    }

    .showoff-left {
        display: flex;
        background: url(../images/textured-torn-paper-for-creative-projects-isolated-transparent-png.webp) center/contain no-repeat;
    }

    .showoff-right { 
        display: flex;
    }
}

@media screen and (min-width: 700px) {
    .hero-about {
        display: flex;
        flex-direction: column;
    }

    .hero-image {
        display: flex;
        flex-direction: column;
        flex: 0 1 30%;
        justify-content: center;
        align-items: center;

        img {
            max-height: 40vw;
            transition: all .5s;
            max-width: 100%;
            object-fit: cover;
            clip-path: circle();
        }
    }

    .hero-blurb {
        flex: 1 1 30%;
        display: flex;
        align-items: center;
    }
}

@media screen and (min-width: 1000px) {
    .hero-blurb {
        padding: 1em 10em;
    }

    .hero-image {
        padding-top: .5em;
        filter: drop-shadow(0px -10px 10px rgba(0,0,0,0.05));
        max-height: 20vw;

        img {
            max-height: 100%;
            clip-path: circle();
        }
    }

    .showoff-left {
        display: flex;
        font-size: 1.5em;
        padding: 1em 0em;
        position: absolute;
        transform: translate(0px, -250px) rotate(-12deg);
        min-width: 400px;
        min-height: 200px;
        background: url(../images/textured-torn-paper-for-creative-projects-isolated-transparent-png.webp) center/cover no-repeat;
    }

    .showoff-right {
        background: unset;
        position: absolute;
        transform: translate(60vw, -15vh) rotate(-3deg);
        max-width: 400px;
    }

}

@media screen and (min-width: 1300px) {
    .showoff-right {
        transform: translate(55vw, -10vh) rotate(-3deg);
        max-width: unset;
    }
}

@media screen and (min-width: 1450px) {
    .showoff-left {
        font-size: 2.2em;
        padding: 1em 0em;
        position: absolute;
        transform: translate(0px, -350px) rotate(-12deg);
        min-width: 550px;
        min-height: 300px;
    }

    .showoff-right {
        transform: translate(57vw, -10vh) rotate(-3deg);
    }
}

@media screen and (min-width: 1700px) {
    .hero-blurb {
        padding: 1em 25em;
    }
}

@media screen and (min-width: 1900px) {
    .showoff-left {
        font-size: 1.7em;
        padding: 1em 0em;
        position: absolute;
        transform: translate(200px, -250px) rotate(-7deg);
        min-width: 400px;
        min-height: 200px;
    }

    .hero-image {
        padding-top: 1em;
        flex: 0 1 15%;
        max-height: 20vw;

        img {
            max-height: 100%;
        }
    }
}

@media screen and (min-width: 2200px) {

}