:root {
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #efefef;

  --color-text-primary: #171717;
  --color-text-secondary: #737373;
  --color-text-tertiary: #848484;
  --color-text-highlight: rgb(255,130,0);

  --color-text-link-primary: #FF8200;
  --color-text-link-hover: #4d4d4d;

  --header-font: "sohne-bold", "-apple-system", san-serif;
  --body-font: "sohne", "-apple-system", san-serif;

  --body-font-p: 1rem;
  --body-font-h1: 3.815rem;
  --body-font-h2: 3.052rem;
  --body-font-h3: 2.441rem;
  --body-font-h4: 1.953rem;
  --body-font-small: 0.8rem;
  --body-font-caption: 0.64rem;

  --border-radius: 12px;
  --transition: all 300ms ease-out;

}

@font-face {
        font-family: 'sohne';
        src: url('../type/soehne-buch.woff2') format('woff2');
    }

body, html {
  -webkit-font-smoothing: antialiased;
}

body {
  background-color: var(--color-bg-primary);
  font-size: 1em;
  font-family: var(--body-font);
  line-height: 1.8em;
  color: var(--color-text-primary);
  text-transform: lowercase;
}

::selection {
  background: var(--color-bg-secondary);
}

h1, h2, h3, h4 {
  color: var(--color-text-primary);
  font-size: var(--body-font-p);
  font-weight: inherit;
}

h1 {
  color: var(--color-text-highlight);
}

h3 {
  color: var(--color-text-secondary);
}

p {
  font-size: var(--body-font-p);
  color: var(--color-text-secondary);
}

a {
  color: var(--color-text-secondary);
  transition: var(--transition);
  text-decoration: none;
  overflow: hidden;
  border-bottom: none;
}

a:after {
  /* content: " \2197"; */
}

a:hover {
  transition: var(--transition);
  color: var(--color-text-highlight);
}

p a {
  transition: var(--transition);
  color: var(--color-text-highlight);
}

.project-description a {
  color: var(--color-text-highlight);
}

ul {
  padding: 0;
  margin: 0;
  float: left;
  list-style: none;
  list-style-type: none;
}

li {
  color: var(--color-text-secondary);
}

div.list-block li {
  text-align: left;
  /* float: left; */
}

.caption {
  font-size: var(--body-font-small);
}

.wrapper {
  width: 80em;
  margin: 4em auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(2em, auto);
  gap: 1em;
}

section {
  margin-bottom: 6em;
}

section h2 {
  grid-column: 5 / 12;
}

section.case-study-overview h3 {
  grid-column: 5 / 12;
  margin-top: 0;
  margin-bottom: 4em;
}

section p {
  grid-column: 5 /12;
}

section.case-study-overview ul {
  grid-column: 5 / 8;
  margin-bottom: 4em;
  /* list-style-type: decimal;
  list-style-position: inside; */
}

section.case-study-overview ul:nth-of-type(2), section.case-study-overview ul:nth-of-type(4) {
  grid-column: 9 / 12;
}

section.case-study-overview ul li{
  padding-bottom: 1em;
}

section div.list-block {
  grid-column: 5 /9;
}

section div.list-block:last-of-type {
  grid-column: 9 / 13;
}

section.recent-projects {
  margin-bottom: 2em;
}

.header {
  grid-column: 1 /13;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(2em, auto);
  gap: 1em;
}

.title {
  grid-column: 1 /4;
  grid-row: 1;
}

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

.nav {
  grid-column: 10;
  grid-row: 1;
}

.about {
  grid-column: 1 /13;
  grid-row: 2;

  display: grid;
  grid-template-columns: subgrid;
}

.case-study-overview {
  grid-column: 1 /13;
  grid-row: 2;

  display: grid;
  grid-template-columns: subgrid;
}

.brands {
  grid-column: 1 /13;
  grid-row: 3;
  display: grid;
  grid-template-columns: subgrid;
}

.list-block {
  float: left;
}

.recent-projects {
  grid-column: 1 /13;
  grid-row: 4;
  display: grid;
  grid-template-columns: subgrid;
}

section.case-study-section-header {
  margin-bottom: 2em;
}

.case-study-section-header {
  grid-column: 1 /13;
  grid-row: auto;
  display: grid;
  grid-template-columns: subgrid;
}

.case-study-section-header h2, .case-study-section-header p {
  margin: 0;
}

.project {
  grid-column: 1 /13;
  display: grid;
  grid-template-columns: subgrid;
}

.project-image {
  grid-column: 5 / 12;
  grid-row: 1;
  overflow: hidden;
  border-radius: var(--border-radius);
  background: var(--color-bg-secondary);
}

img {
  width: 100%;
  object-fit: contain;
  image-rendering: auto;
}

.project-description {
  grid-column: 3 / 5;
  grid-row: 1;
  overflow: hidden;
}

div.case-study-hack .grid > div.project-description {
  grid-column: 5 / 11;
  grid-row: 2;
  overflow: hidden;
}


.footer {
  grid-column: 5 / 13;
}

.footer p {
  font-size: var(--body-font-small);
  color: var(--color-text-tertiary);
  line-height: 0.8em;
}


@media (max-width:1280px){

  .wrapper{
    width: 1080px;
  }

}

@media (max-width:1080px){

    .wrapper{
      width: 960px;
    }

}

@media (max-width:960px){

    .wrapper{
      width: 780px;
    }

}

@media (max-width:600px){

    .wrapper{
      max-width: 90%;
    }

    h1 { line-height: 2em; }

    section {
      margin-bottom: 3em;
    }

    section h2 {
      grid-column: 1 / 12;
    }

    section p {
      grid-column: 1 /12;
    }

    section div.list-block {
      grid-column: 1 /7;
    }

    section div.list-block:last-of-type {
      grid-column: 7 /13;
    }

    .header {
      grid-column: 1 /13;
      grid-row: 1;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-auto-rows: minmax(2em, auto);
      gap: 1em;
    }

    .title {
      grid-column: 1 /4;
    }

    .subtitle {
      /* grid-column: 4 / 9; */
      display: none;
    }

    .rductn {
      grid-column: 5 / 7;
    }

    .resume {
      grid-column: 8 / 10;
    }

    .contact {
      grid-column: 11 / 12;
    }

    .nav {
      grid-column: 4 / 13;
    }

    .about {
      grid-column: 1 /13;
    }

    .brands {
      grid-column: 1 /13;
    }

    .recent-projects {
      grid-column: 1 /13;
    }

    .project {
      grid-column: 1 /13;
    }

    .project-image {
      grid-column: 1 / 13;
      grid-row: 1;
    }

    img {

    }

    .project-description {
      grid-column: 1 / 8;
      grid-row: 2;
    }

    .project-description  ul li:last-of-type {
      padding-top: 0.6em;
    }

    .footer {
      grid-column: 1 / 13;
    }

}