@charset "utf-8";

:root {
  --font-family: "Inter", sans-serif;
}
@supports (font-variation-settings: normal) {
  :root {
    --font-family: "Inter var", sans-serif;
  }
}

:root {
  --primary-font-family: "Inter";
  --monospace-font-family: "IBM Plex Mono", monospace;
}

b,
strong {
  font-weight: 700;
  font-style: inherit;
}
i,
em {
  font-weight: inherit;
  font-style: italic;
}

/** {
  outline: red solid 1px;
}*/

body {
  font-family: var(--primary-font-family);
  font-weight: 300;
  font-size: 14px;
  max-width: calc(100vw - 10em);
  margin: 10em;
}

article {
  display: block;
  width: 100%;
  padding: 1em;
  border-radius: 20px;
  margin-bottom: 5em;
}

.header {
  width: 100%;
  height: auto;
  content-align: center;
  text-align: center;
}

.header h2 {
  padding-top: 3em;
  padding-bottom: 1em;
}

.header .imgwrapper {
  padding-top: 2em;
}

.header .imgwrapper img {
  clip-path: circle(50%);
  height: 30em;
  margin-bottom: -2em;
}

.works {
  margin: 3em auto;
  height: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  grid-auto-flow: dense;
  grid-gap: 1em;
}

.portrait,
.landscape {
  display: flex;
  grid-column: auto / span 1;
  object-fit: cover;
  width: 100%;
  height: auto;
}

.portrait {
  grid-row: span 4;
}

.landscape {
  grid-row: span 2;
}

.focus {
  grid-column: span 2;
}

.works img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 10px;
}

@media only screen and (min-width: 2000px) {
  .works {
    grid-template-columns: repeat(auto-fit, minmax(800px, 1fr));
  }
}

@media only screen and (max-width: 1400px) {
  body {
    margin: 1em;
  }

  .header {
    height: calc(100vh - 4em);
    width: calc(100vw - 4em);
  }

  .header .imgwrapper img {
    height: 20em;
    margin: auto;
  }

  .works {
    margin: 0em auto;
    padding: 0em;
    background-color: unset;
    width: calc(100vw - 2em);
  }
}

@media only screen and (max-width: 900px) {
  .works {
    display: block;
  }

  .works .work {
    margin-bottom: 1em;
  }
}