.po-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr;
grid-column-gap: .7em;
}
.po-intro {
grid-area: 1 / 1 / 2 / 2;
background: #F8F9FA;
border: 1px solid #EAECF0;
border-radius: 5px;
padding: 2em;
}
.po-details {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
grid-area: 1 / 2 / 2 / 5;
grid-column-gap: 1em;
background: #F8F9FA;
border: 1px solid #EAECF0;
border-radius: 5px;
padding: 2em;
}
.po-photo {
padding: 0;
}
.po-name, .po-title {
font-family: 'Montserrat', 'Helvetica Neue', sans-serif !important;
}
.po-name {
font-size: 1.2em;
font-weight: bold;
margin-bottom: .5em;
}
.po-line, .po-email {
display: flex;
flex-direction: row;
align-items: center;
gap: .5em;
padding: .5em 0;
}
.po-email {
margin-top: 1.5em;
}
.po-email-icon {
content: url(//upload.wikimedia.org/wikipedia/commons/7/7f/OOjs_UI_icon_message.svg);
height: 1rem;
}
.po-wikimedia-account-icon {
content: url(//upload.wikimedia.org/wikipedia/commons/8/8b/Wikimedia-logo_black.svg);
height: 1rem;
}
.po-telegram-icon {
content: url(//upload.wikimedia.org/wikipedia/commons/5/58/Font_Awesome_5_brands_telegram-plane.svg);
height: 1rem;
}
.po-whatsapp-icon {
content: url(//upload.wikimedia.org/wikipedia/commons/9/90/WhatsApp_font_awesome.svg);
height: 1rem;
}
.po-phone-icon {
content: url(//upload.wikimedia.org/wikipedia/commons/4/4b/Phone_font_awesome.svg);
height: 1rem;
}
.po-location-icon {
content: url(//upload.wikimedia.org/wikipedia/commons/f/fe/OOjs_UI_icon_mapPin.svg);
height: 1rem;
}
.po-language-icon {
content: url(//upload.wikimedia.org/wikipedia/commons/4/43/OOjs_UI_icon_language-ltr.svg);
height: 1rem;
}
.po-thematic-area-icon {
content: url(//upload.wikimedia.org/wikipedia/commons/f/fb/OOjs_UI_icon_puzzle-ltr.svg);
height: 1rem;
}
.po-timezone-icon {
content: url(//upload.wikimedia.org/wikipedia/commons/d/dd/OOjs_UI_icon_clock.svg);
height: 1rem;
}
.po-calendar-icon {
content: url(//upload.wikimedia.org/wikipedia/commons/8/8b/OOjs_UI_icon_calendar-ltr.svg);
height: 1rem;
}
@media only screen and (max-width: 1024px){
.po-photo {
display: none;
}
.po-details {
grid-template-columns: repeat(2, 1fr);
}
.po-container {
display: flex;
flex-direction: column;
gap: .7em;
}
}