/* Reset */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, img, ins, kbd, q, samp,
small, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body { font: 400 16px/22px 'Inter', -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; color: #aeaeae; letter-spacing: -5%; }
a, a:hover, a:active { outline: none; }
sub, sup { font-size: 50%; line-height: 0; position: relative; }
sup { top: -0.9em; }
a:link { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4, h5, h6 { font-weight: 400; margin: 0; padding: 0; }
ul { list-style: none; margin: 0; padding: 0; }
a { text-decoration: none; }

html, body {
  -webkit-font-smoothing: antialiased;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

body {
	margin: 0;
  padding: 80px 70px;
  background: #fff;
}

hr {
  display: block;
  width: 20px;
  margin: 0 0 20px;
  border: none;
  border-bottom: 1px solid #aeaeae;
}

h1, h3 { font-weight: 500; color: #2e2e2e; }
h1, h2, p { max-width: 50%; }
h3 span { float: right; color: #aeaeae; font-weight: 400; }
h4 { margin: 0 0 20px; }
h5 { margin: 0 0 20px; max-width: 50%; }
h5 span { display: block; color: #2e2e2e; font-weight: 500; }
h5.quote { margin-top: 35px; }
p { margin: 6px 0 35px;}

header { height: 300px; }
header h2 { width: 400px; }


img {
  display: block;
  max-width: 100%;
}

.work { margin: 0 0 140px; }
.work h4 { margin: 35px 0 20px; }

.ww {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 20px;
    margin: 0 0 20px;
}
    
.ww-1 { grid-row: span 2 / span 2; }
.ww-2 { grid-column-start: 1; grid-row-start: 3;}
.ww-3 { grid-column-start: 2; grid-row-start: 1; }
.ww-4 { grid-column-start: 2; grid-row-start: 2; }
.ww-5 { grid-row-start: 3; }

.glp {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 20px;
}
    
.glp-2 { grid-column-start: 1; grid-row-start: 2; }
.glp-3 { grid-row: span 2 / span 2; grid-column-start: 2; grid-row-start: 1; }


.bc {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 20px;
}
    
.bc-1 { grid-row: span 2 / span 2; }
.bc-3 { grid-column-start: 2; }


.ehr {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* grid-template-rows: repeat(3, 1fr); */
    grid-template-rows: auto; 
    gap: 20px;
}
    
.ehr-1 { grid-column: span 2 / span 2; }
.ehr-2 { grid-row-start: 2; }
.ehr-3 { grid-row-start: 2; }
.ehr-4 { grid-column: span 2 / span 2; }


.drib {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
     grid-template-rows: auto; 
    gap: 20px;
}
    
.drib-1 { grid-column: span 2 / span 2; }
.drib-2 { grid-row-start: 2; }
.drib-3 { grid-row-start: 2; }
.drib-4 { grid-column: span 2 / span 2; }
.drib-5 { grid-column: span 2 / span 2; grid-row-start: 4; }
        
.full img { margin: 0 0 20px; }

@media screen and (max-width: 1023px) {
  body { padding: 40px 20px; }
  h1, h2, p, h5 { max-width: 90%; width: 90%; }
  header h2 { width: 90%; }
  .ww, .bc, .ehr, .glp, .drib { display: block; }
  .ww img, .bc img, .ehr img, .glp img, .drib img { margin: 0 0 20px; }
}