.userinfo {font-family: sans-serif, serif, system-ui }
.userinfo-detailed { margin-top: 3rem;}
.userinfo-detailed-column {padding: 10px;}
.userinfo-detailed-column.col-2 { margin-top: 1rem;}
.userinfo-detailed-column.col-3 { margin-top: 2rem;}
@media (min-width: 800px) {
.userinfo-basic {display: grid; grid-template-columns: 2fr 1fr;justify-content: space-around; align-items: center;}
.userinfo-image {order: 2;}
.userinfo-detailed {display: grid; grid-template-columns: 1fr 1fr;}
.userinfo-detailed-column.col-1 { margin-right: 1rem;}
.userinfo-detailed-column.col-2 { margin-top: 0rem;}
.userinfo-detailed-column.col-3 {display: grid; grid-column: span 2; grid-template-columns: 1fr 1fr; justify-content: space-between;}
}
@media (min-width: 1080px) {
.userinfo-detailed-column.col-3 {grid-column: span 3;}
.userinfo-babels #userboxes > tbody > tr > td {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
h1, h2 {border: none; font-weight: bold; text-transform: uppercase;}
.userinfo-about {
text-align: justify;
}
.userinfo-image img {
width: 300px;
height: auto;
}
.userinfo-jobtitle {
font-size: 1.2rem;
line-height: 1.2;
}
.userinfo-quote {
margin: 1rem 3rem;
font-size: 1rem;
position: relative;
line-height: 1.2;
color: #cacaca;
}
.userinfo-quote:before { position: absolute; color: #cacaca; font-size: 6rem;}
.userinfo-quote:before { content: '“'; left: -4rem; top: -1rem;}
#userboxes { float: none!important;}
.userinfo-img img {
height:auto!important;
width:100%!important;
margin-bottom:1rem;
}
.img-caption {
margin-top: -0.8rem;
text-align: center;
color: darkgrey;
font-size: .8rem;
}
.logo {
margin: 10px;
}
.w-grid {
display: grid;
grid-template-columns: 1fr 5fr;
margin: .5rem 0;
/*border: 1px solid #efefef;*/
border-radius: 0.3rem;
justify-content: space-between;
align-items: center;
}
.w-grid:nth-of-type(odd) {
background: #e9e4ff;
}
.w-grid:nth-of-type(even) {
background: #f7f6ff;
}
.w-grid img {
width: 100%;
height: auto;
}