.paragraphcomponent{
	
	position: relative;
	padding: 20px 0px 20px 0px;
	
}

.paragraphcomponent::before{
	content: '';
    background: inherit;
    position: absolute;
    left: -50vw;
    top: 0;
    bottom: 0;
    width: 50vw;
    display: block;
}
.paragraphcomponent::after{
	content: '';
    background: inherit;
    position: absolute;
    right: -50vw;
    top: 0;
    bottom: 0;
    width: 50vw;
    display: block;
}

.paragraphcomponent .item{
    margin: 0 !important;
}


.mediaparagraphcomponent{           /* RIGHT*/
	position: relative;
	padding: 20px 0px 20px 0px;
	display: flex;
}
.mediaparagraphcomponent-reverse    /* LEFT */
{
	position: relative;
	padding: 20px 0px 20px 0px;
	display: flex;
	flex-direction: row-reverse
}



.mediaparagraphcomponent::before,
.mediaparagraphcomponent-reverse::before
{
	content: '';
    background: inherit;
    position: absolute;
    left: -50vw;
    top: 0;
    bottom: 0;
    width: 50vw;
    display: block
}

.mediaparagraphcomponent::after,
.mediaparagraphcomponent-reverse::after
{
	content: '';
    background: inherit;
    position: absolute;
    right: -50vw;
    top: 0;
    bottom: 0;
    width: 50vw;
    display: block;
}

.mediaparagraphcomponent .item{
    margin: 0 !important;
}
.mediaparagraphcomponent .item img{
    padding-left: 1em;
}

.mediaparagraphcomponent-reverse .item{
    margin: 0 !important;
}
.mediaparagraphcomponent-reverse .item img{
    padding-right: 1em;
}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 768px) {
    .mediaparagraphcomponent,
    .mediaparagraphcomponent-reverse    /* LEFT */
	{
		flex-direction: column-reverse !important;
	}
    
    
    .mediaparagraphcomponent .item img{
        padding-left: 0;
    }
    .mediaparagraphcomponent-reverse .item img{
        padding-right: 0;
    }

}