body {
  font-size: clamp(1rem, .8vw + .8rem, 1.25rem);
}
h1, h2, h3 { font-weight: 600; }
h2 { font-size: clamp(2rem, 3.2vw + 1.2rem, 3rem); }

#hero {
  min-height: calc(100vh);
  padding-block: 1rem 0;
  margin-bottom: -5vh;
  color: white;
  background:
    center bottom / cover no-repeat url("./hero.webp?v=ejOqlOaV99"),
    linear-gradient(to bottom, black 6rem, #6f9fb8 80%, white);
  font-size: 1rem;
  nav {
    display: flex;
    align-items: center;
  }
  svg, img {
    display: block;
    width: auto;
    height: 100%;
  }
  #logo {
    height: 2rem;
    & + * { margin-left: auto; }
  }
  a { color: inherit; }
  .social {
    padding: .75rem;
    height: 1.5rem;
  }
  #about-link {
    padding: .5rem 1rem;
    margin-left: 1rem;
    border: 1px solid white;
    border-radius: .25rem;
    text-decoration: none;
    font-weight: 600;
  }
  :is(.social, #about-link):hover {
    background: #FFF1;
  }
  header {
    padding: 10vh 0;
  }
  h1 {
    text-align: center;
    font-size: clamp(2.5rem, 4.7vw + 1.3rem, 4rem);
  }
  @media(width < 500px){
    #logo { display: none; }
  }
}

#intro {
  header {
    display: grid;
    grid: auto / 1fr auto;
    gap: 1.5em 3em;
    padding: 0 0 4rem;
    h2 {
      grid-row: span 2;
      margin: 0;
      font-weight: 600;
      white-space: nowrap;
    }
    p {
      margin: 0;
      max-width: 30em;
    }
    p:not(:first-of-type){
      font-size: 1.2em;
      font-weight: 600;
    }
  }
  a {
    display: inline-block;
    padding: .75rem 1rem;
    margin: 1em 0;
    color: white;
    background: #d28148;
    font-weight: 600;
    border-radius: .25rem;
    text-decoration: none;
    transition: background-color .2s;
    &:hover { background: #bc7849; }
  }
  @media(width < 800px){
    header { grid: auto / auto; }
  }
}

#perks {
  color: white;
  background: #373735;
  h2 { text-align: center; }
  ul {
    margin: 2rem 0;
    list-style: none;
    font-size: 1.2em;
    font-weight: 600;
  }
  li {
    margin: .5em 0;
  }
}

#where {
  header {
    max-width: 30em;
    margin: 3em auto 5em;
    text-align: center;
  }
  #offices {
    display: flex;
    gap: 2.5rem;
    figure {
      flex: 1 0 0;
      margin: 0;
    }
    img {
      display: block;
      width: min(100%, 25rem);
      height: auto;
      margin: 0 auto;
      object-fit: cover;
      border-radius: 1rem;
    }
    figcaption {
      margin: 1.5rem 0 0;
      font-weight: 600;
      font-size: 1.2em;
      text-align: center;
    }
  }
  @media(width < 768px){
    #offices {
      flex-flow: column;
      img { max-height: 15rem; }
    }
  }
}

#open-positions {
  background: #f1ede9;
  text-align: center;
  ul:not(:has(li)){
    margin: 7rem 0;
    font-weight: 600;
    font-size: 1.2em;
    &::after { content: "Currently we don't have any open positions."; }
  }
  ul {
    list-style: none;
    display: flex;
    flex-flow: column;
    gap: 1rem;
    padding: 0;
    margin: 4rem auto 2rem;
    max-width: 50rem;
  }
  li {
    display: grid;
    grid: auto auto / 1fr auto;
    padding: 1rem 1rem 1rem 2rem;
    background: white;
    border: 1px solid #bfbfbf;
    border-radius: .5rem;
    text-align: left;
    .job-title {
      font-weight: 600;
      color: #bc7849;
    }
    .job-location svg {
      width: .75em;
      height: .75em;
      margin-inline-end: .25ch;
    }
    a {
      place-self: start;
      grid-area: 1 / 2 / span 2;
      padding: .5rem 1.5rem;
      background-color: #d28148;
      color: white;
      text-decoration: none;
      border-radius: .25rem;
      font-weight: 600;
      transition: background-color .2s;
      &:hover { background-color: #bc7849; }
    }
  }
}

#vibe {
  display: grid;
  grid: auto / repeat(3, auto);
  gap: 1.5rem;
  img:first-child {
    grid-area: span 2 / span 2;
  }
  img {
    width: 100%;
    height: auto;
  }
}