@charset "UTF-8";

/* font */

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

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

/* template */

body {
  background-color: #efefef;
}

/* grid template setup */

#container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 4fr 2em 3fr 4.5fr 6.5em;
  grid-gap: 40px;
  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{
  display: grid;
  grid-column: 1 / 3;
  grid-row: 1;
}

.b{
  display: grid;
  grid-column: 3 / 7;
  grid-row: 1;
}

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

.d{
  display: grid;  
  grid-column: 3 / 5;
  grid-row: 2;
}

.e{
  display: grid;
  grid-column: 5 / 7;
  grid-row: 2;
}

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

.g{
  display: grid;
  grid-column: 3 / 5;
  grid-row: 3 / 5;
  margin-bottom: 25px;
}

.h{
  display: grid;
  grid-column: 5 / 7;
  grid-row: 3 / 5;
  margin-bottom: 25px;
}

.i{
  display: grid;
  grid-column: 1 / 3;
  grid-row: 4;
  margin-bottom: 25px;
  margin-top: -8px;
}

.j{
  display: grid;
  grid-column: 1 / 3;
  grid-row: 5;
}

.k{
  display: grid;
  grid-column: 3 / 5;
  grid-row: 5;
}

.l{
  display: grid;
  grid-column: 5 / 7;
  grid-row: 5;
}

/* grids within sections */

.a{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em 12em;
}

.b{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em 5em 1fr;
}
.g, .h{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 4fr;
  grid-gap: 10px;
  margin-top: 24px;
}


/* double column */

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

/* content alignments */

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

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

/* template */

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

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

/* weight/stance variations */

#nestle {
  font-weight: 800;
}

.light {
  font-weight: 300;
}

.normal {
  font-weight: 400;
}

.medium {
  font-weight: 550;
}

.frenchlight {
  font-family: italichostgrotesk;
  font-weight: 300;
}

.frenchnormal {
  font-family: italichostgrotesk;
  font-weight: 400;
}

.frenchmedium {
  font-family: italichostgrotesk;
  font-weight: 600;
}