@font-face {
  font-family: 'Helvetica Now Text'; 
  font-style: normal; 
  font-weight: 400;
  src: url('../../assets/fonts/HelveticaNow/HelveticaNowforMonks.woff2') format('woff2'),
  url('../../assets/fonts/HelveticaNow/HelveticaNowforMonks.woff') format('woff');
}

@font-face {
  font-family: 'Helvetica Now Text Medium'; 
  font-style: normal; 
  font-weight: 500;
  src: url('../../assets/fonts/HelveticaNow/HelveticaNowforMonks-TextMd.woff2') format('woff2'),
  url('../../assets/fonts/HelveticaNow/HelveticaNowforMonks-TextMd.woff') format('woff');
}

@font-face {
  font-family: 'Helvetica Now Display'; 
  font-style: normal; 
  font-weight: 500;
  src: url('../../assets/fonts/HelveticaNow/HelveticaNowforMonks-Md.woff2') format('woff2'),
  url('../../assets/fonts/HelveticaNow/HelveticaNowforMonks-Md.woff') format('woff');
}

@font-face {
  font-family: 'Morion Trial'; 
  font-style: normal; 
  font-weight: 400;
  src: url('../../assets/fonts/Morion/MorionTrial-Regular.woff2') format('woff2'),
  url('../../assets/fonts/Morion/MorionTrial-Regular.woff') format('woff');
}

html{
	font: 62.5%/1 'Helvetica Now Text', Helvetica, Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
}

:root {
  --vh: 1vh;
  --grid-gap: calc((20 / 410) * 100%);
  --grid-column: calc((87 / 410) * 100%);
  --grid-column-count: 4;
  --themed-background: #EAE8E4;
  --themed-foreground: #2D2D2D;
}

body{
  background: var(--themed-background);
  color:  var(--themed-foreground);
}

body.overflow-hidden{
  overflow-y: hidden;
}

img {
  width: 100%;
}

.project-item {
  height: auto;
}

/* media.monks grid system */

.grid-row {
  display: grid;
  grid-column-gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fill, var(--grid-column));
  padding-left: var(--grid-gap);
  padding-right: var(--grid-gap);
}

.grid-row.no-wrap {
  grid-auto-flow: column;
}

.grid-gutter {
  padding-left: var(--grid-gap);
  padding-right: var(--grid-gap);
}

.grid-row .grid-row,
.grid-gutter .grid-row {
  padding-left: 0;
  padding-right: 0;
}

.grid-col-1 { grid-column-end: span 1; }
.grid-col-2 { grid-column-end: span 2; }
.grid-col-3 { grid-column-end: span 3; }
.grid-col-4 { grid-column-end: span 4; }

.grid-col-width-1 { width: calc(var(--grid-column) * 1 + var(--grid-gap) * 0); }
.grid-col-width-2 { width: calc(var(--grid-column) * 2 + var(--grid-gap) * 1); }
.grid-col-width-3 { width: calc(var(--grid-column) * 3 + var(--grid-gap) * 2); }
.grid-col-width-4 { width: calc(var(--grid-column) * 4 + var(--grid-gap) * 3); }

@media (min-width: 1200px) {

  :root {
    --grid-gap: calc((40 / 1920) * 100%);
    --grid-column: calc((205 / 1920) * 100%);
    --grid-column-count: 8;
  }

  .grid-col-l-1 { grid-column-end: span 1; }
  .grid-col-l-2 { grid-column-end: span 2; }
  .grid-col-l-3 { grid-column-end: span 3; }
  .grid-col-l-4 { grid-column-end: span 4; }
  .grid-col-l-5 { grid-column-end: span 5; }
  .grid-col-l-6 { grid-column-end: span 6; }
  .grid-col-l-7 { grid-column-end: span 7; }
  .grid-col-l-8 { grid-column-end: span 8; }

  .grid-col-l-width-1 { width: calc(var(--grid-column) * 1 + var(--grid-gap) * 0); }
  .grid-col-l-width-2 { width: calc(var(--grid-column) * 2 + var(--grid-gap) * 1); }
  .grid-col-l-width-3 { width: calc(var(--grid-column) * 3 + var(--grid-gap) * 2); }
  .grid-col-l-width-4 { width: calc(var(--grid-column) * 4 + var(--grid-gap) * 3); }
  .grid-col-l-width-5 { width: calc(var(--grid-column) * 5 + var(--grid-gap) * 4); }
  .grid-col-l-width-6 { width: calc(var(--grid-column) * 6 + var(--grid-gap) * 5); }
  .grid-col-l-width-7 { width: calc(var(--grid-column) * 7 + var(--grid-gap) * 6); }
  .grid-col-l-width-8 { width: calc(var(--grid-column) * 8 + var(--grid-gap) * 7); }
}