.row{
float:left;
width:100%;
min-height:5.125rem;
margin:.5rem 0;
padding:.45rem;
background:var(--middle-background-color);
border:#0FF000 0px solid;
border-radius:.25rem;
}

.row .icon{
float:left;
width:3rem;
height:3rem;
padding:0;
border:#FF0000 0px solid;
}

.row .left{
float:left;
margin:0;
padding:0;
border:#0FF000 0px solid;
}

.row .right{
float:left;
margin:0;
padding:0;
border:#0FF000 0px solid;
}

/* Mobile View till Tablet */
@media screen and (max-width: 45em){

.row .left{
float:left;
width:100%;
text-align:center;
}

.row .right{
float:left;
width:100%;
text-align:center;
}

.row .icon-wrapper{
float:left;
width:100%;
border:#FF0000 0px solid;
display:flex;
justify-content:center;
align-items:center;
}

.row .icon{
margin:.25rem 0;
padding:0;
border:#FF0000 0px solid;
}


}

/* Mobile View -> Tablet */
@media screen and (min-width: 45rem) and (max-width: 79.5rem){

.row .left{
width:calc(35% - 4rem);
}

.row .right{
float:right;
width:65%;
}

.row .icon{
margin:0 .75rem 0 0;
padding:0;
border:#FF0000 0px solid;
}

}

/* Mobile View > Tablet && Portrait */
@media screen and (min-width: 45rem) and (max-width: 79.5rem) and (orientation: portrait){

.row .left{
width:calc(35% - 4rem);
}

.row .right{
float:right;
width:65%;
}

.row .icon{
margin:0 .75rem 0 0;
padding:0;
border:#FF0000 0px solid;
}

}

/* Desktop View */
@media screen and (min-width: 79.5rem){

.row .left{
width:calc(30% - 4rem);
max-width:12rem;
}

.row .right{
float:right;
width:70%;
}

.row .icon{
margin:0 .75rem 0 0;
padding:0;
border:#FF0000 0px solid;
}

}

.row .left h4{
display:block;
margin:0;
padding:0;
border:#0FF000 0px solid;
}

.row .left p{
display:block;
margin:0;
padding:0;
border:#ff0000 0px solid;
}


.row .card{
width:100%;
display:none;
}

.row .card:first-child{
display:block;
}