:root{
    --about-artist-font: "Cormorant", serif;
    --descriptions: "Montserrat", sans-serif;
    --butter-yellow: #f5f597;
    --bright-sky:#4A90E2;
    --bg-color: #FAF7F2;

}

*{
    box-sizing: border-box;
    margin:auto;
}
body{
    overflow-x: hidden;
}

.about-wrap{
    width:100%;
    padding:40px;
    margin: 0;
    background-color: var(--bg-color);
    position:relative;
}

.about_header{
    margin: 0 0 20px;
}

.titles_s{
    position:relative;
    display:inline-block;
    transform: skewy(-4deg);
    font-size:3rem;
    font-weight: 900;
    color: var(--red-orange);
    text-transform: uppercase;
    letter-spacing: 2px;
   text-shadow: 
    1px 1px 0px #FFFFFF, -1px -1px 0px #FFFFFF, 
    1px -1px 0px #FFFFFF, -1px 1px 0px #FFFFFF,
    2px 2px 0px #FFB703, 
    3px 3px 0px #FFB703, 
    4px 4px 0px #FFB703, 
    5px 5px 0px #FFB703;
    height: 50%;
    z-index:3;
}

.back_story{
    display:flex;
    align-items: stretch;
    padding: 40px;
    padding-right: 45%;
    position: relative;
    background-color: #F3E1B5;
}

.back_story p{
    margin: 0;
    padding: 40px 40px 40px 50px;
    font-family: var(--about-artist-font);
    font-size: 18px;

}

.about-img-wrap{
    position: absolute;
    top:-50px;
    right: 40px;    
    width: 35%;
    z-index: 1;
    overflow: hidden;
}

.about-img-wrap::before{
    content: '';
    position:absolute;
    inset: -16px -16px -16px 0;
    background-image:
        linear-gradient(var(--red-orange) 1px, transparent 1px),
        linear-gradient(90deg, var(--red-orange) 1px, transparent 1px);
    background-size: 18px 18px;
    opacity: 0.5;
    z-index: -1;
}

.about-img-wrap img{
    position: relative;
    z-index: 1;
    width: 80%;
    max-height: 50%;
    object-fit: cover;
    display: block;
}

.facts-bar{
    border-top: 2px solid black;
    padding-top: 20px;
    margin-top: 20px;
}

.facts-bar h3{
    color: var(--bright-sky);
    margin: 0 0 6px;
}

span{
    font-size: 18px;
}

@media (max-width: 768px) {
    .about-wrap {
        padding: 20px;
    }

    .back_story {
        padding-right: 20px; /* remove the space you left for the image */
    }

    .about-img-wrap {
        position: relative; /* take it out of absolute positioning */
        top: auto;
        right: auto;
        width: 100%;
        max-height: 350px;
        margin-top: 20px;
    }

    .about-img-wrap img{
        display:none;
}

    .titles_s {
        font-size: 2rem; /* scale down the big heading */
    }
}