/* Hero-Page */
.hero-wrapper {
  min-height: 80dvh;
  margin-top: calc(var(--nav-height) * 2);
  display: flex;
  justify-content: center;
}
.hero-grid .item:nth-child(1) {
  grid-column: 1 / -1;
  grid-row: 1 / 2;
}
.hero-grid .item:nth-child(1) h1 {
  font-size: var(--font-size-logo-small);
  -webkit-transform: scaleY(1.8);
  transform: scaleY(1.8);
  z-index: 1;
  font-weight: 300;
  text-align: center;
  place-content: center;
}
.hero-grid .item:nth-child(2) {
  grid-column: 2 / 12;
  grid-row: 1 / 2;
  z-index: 2;
  margin: 2rem 0 calc(-1 * var(--grid-gutter)) 0;
}
.hero-grid .item:nth-child(3) {
  grid-column: 1 / -1;
  grid-row: 2 / 3;
  background: var(--tile-bright);
  border-radius: var(--border-radius);
  padding: var(--space-m-l);
  place-content: center;
}
.item-tile {
  display: flex;
  flex-direction: column;
  background: var(--bg-bright);
  padding: var(--space-l);
  border-radius: var(--border-radius);
}
.item-tile p:nth-of-type(2) {
  margin: var(--space-2xs) 0 var(--space-2xs-xs) 0;
}
.line {
  border-top: 1px solid var(--bg-dark);
  width: 100%;
  margin: 0.3rem 0 1rem 0;
}

/* BREAKPOINTS */
@media only screen and (min-width: 800px) and (min-height: 500px) {
  /* Hero-Section */
  .hero-container {
    position: absolute;
    bottom: var(--space-s);
    align-items: center;
  }
  .hero-grid .item:nth-child(1) h1 {
    font-size: var(--font-size-logo-big);
  }
  .hero-grid .item:nth-child(2) {
    grid-column: 6 / 12;
    grid-row: 1 / 3;
    margin: 0;
  }
  .hero-grid .item:nth-child(3) {
    grid-row: 2 / 3;
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
  }
  .item-tile {
    grid-column: 1 / 7;
    padding: var(--space-m);
  }
}
@media only screen and (min-width: 1120px) {
  .hero-grid .item:nth-child(2) {
    grid-column: 7 / 12;
  }
  .item-tile {
    grid-column: 1 / 6;
    padding: var(--space-l);
    margin-left: var(--space-l);
  }
}