*,:before,:after{box-sizing:border-box}
:root{--metric-rhythm:2rem;--metric-interaction-padding:.6rem .6rem}
body{height:100vh;font-family:'Josefin Sans',sans-serif;margin:0;padding:0;display:grid;grid-template-columns:65% 35%;grid-template-areas:"header sider" "main sider" "main sider" "footer sider";background-image:url(bg-pattern.svg);background-size:100% 100%}
.visually-hidden{border:0;clip:rect(0 0 0 0);height:auto;margin:0;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}
.flow{--flow-space:var(--metric-rhythm)}
.flow > * + *{margin-top:1em;margin-top:var(--flow-space)}
header{grid-area:header;height:100px;padding-top:3rem;padding-left:10rem}
.sider{grid-area:sider;background-image:url(hospital.jpg);background-repeat:no-repeat;background-size:cover}
.main{grid-area:main;max-width:800px;padding-left:10rem}
h2{font-size:3.6rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;line-height:1.1em;color:#0e890a;}
h2 .heading--pink{font-weight:300;color:#195279;}
.main p{color:#195279;line-height:1.5em;width:49ch}
footer{grid-area:footer;display:flex;justify-content:start;padding-left:10rem;text-transform: uppercase;border-top:2px solid #19537979;padding-top:2rem}
footer a{color:#195279}
#logo{display:flex;align-items:center;text-decoration: none;color:#0e890a;text-transform: uppercase;}
#logo span{display: inline-block;font-weight:600;padding-top:7px;padding-left:5px;}

@media screen and (-ms-high-contrast: active) {
input[type],button{border:1px solid}
}
@media(max-width: 991px) {
body{grid-template-columns:100%;display:block;overflow-x:hidden;}
.sider{min-height:25rem;background-image:url(hospital.jpg);}
.main,header{padding:2rem;width:100vw;margin:0 auto}
.main h2,.main p{text-align:center}
.main h2{font-size:3rem}
.main p{width:98%;margin:0 auto}
footer{padding:0;justify-content: center;}
}