.grid_container {
    position: sticky;
    top: 15vh;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    place-items: center;
    /*border: blue solid;*/

}

.grid_item {
    display: grid;
    text-align: center;
    background-size: contain;
    background-position: top;
    background-repeat: no-repeat;
    place-items: center;
    /*border: red solid;*/
    margin: 3vw;

}



.box_wrapping_text {
    place-items: center;
    height: var(--vw);
    width: var(--vw);
    /*border: green solid;*/

}


/*background images*/
#find_rhyme {
    background-image: url("../pics/rhyme.jpeg");
}

#put_stress {
    background-image: url("../pics/stress.jpeg");
}

#transcribe {
    background-image: url("../pics/transcribe.jpeg");
}

#about {
    background-image: url("../pics/about.jpeg");
}

/*font styling*/
#text_rhyme, #text_stress, #text_transcribe, #text_about {
    font-size: larger;
    font-weight: bold;
}

/*text alignment to background*/
#text_rhyme{
    position: relative; top: 10%;
    left: 8%;
}

#text_stress {
    position: relative;
    top: 17%;
    left: -11%;
}

#text_transcribe {
    position: relative;
    top: 30%;
    left: 5%;
}

#text_about {
    position: relative;
    top: 43%;
}


@media (max-width: 768px) {

    .grid_container {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 1fr);
    }

    .box_wrapping_text {
        min-height: 86vw;
        min-width: 86vw; }
}