@charset "UTF-8";

/* font */

@font-face {
  font-family: hostgrotesk;
  src: 
    url('HostGrotesk-VariableFont_wght.ttf') format('truetype');
  font-weight: 300-800;
  font-style: normal;
}

/* template */

body {
  background-color: #efefef;
}

/* grid template setup */

#container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 3fr 7fr 7fr 1fr;
  grid-gap: 50px;
  padding: 30px;
  width: 800px;
  height: 800px;
  margin: 100px auto 25px auto;
  background-color: #fff;
  box-sizing: border-box;
  outline: 1px solid black;
}

/* section setup */

.a{
  grid-column: 1;
  grid-row: 1 / 3;
}

.b{
  grid-column: 2;
  grid-row: 1;
}

.c{
  grid-column: 3;
  grid-row: 1;
}

.d{
  grid-column: 2;
  grid-row: 2;
}

.e{
  grid-column: 3;
  grid-row: 2;
}

.f{
  grid-column: 1 / 3;
  grid-row: 3;
}

.g{
  grid-column: 3;
  grid-row: 3;
}

.h{
  grid-column: 3;
  grid-row: 4;
}

/* grids within sections */

.b {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3fr 2fr;
  grid-gap: 5px;
}

.c {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 5px;
}

.d {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3fr 1fr 2em;
  grid-gap: 5px;
}

.e, .g{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 6em 1fr;
  grid-gap: 10px;
}

.f{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em 15em 4em;
}

/* double column */

.two-col {
  display: grid;
  grid-template-columns: 1fr 5fr;
}

/* content alignments */

.centre-align{
  display: flex;
  align-items: center;
  justify-content: center;
} 

.bottom-align{
  display: flex;
  align-items: flex-end;
}

/* template */

#container>* {
  font-family: hostgrotesk;
  font-size: 10px;
  line-height: normal;
  color: #000;
}

#info {
  font-family: hostgrotesk;
  font-size: 20px;
  line-height: normal;
  color: #000;
  width: 800px;
  margin: 0 auto 100px auto;
}