section#hero {
  margin: var(--header-height) auto 0;
  padding: 0;

  & img {
    margin: auto;
    width: var(--max-site-width);
    max-width: 100%;
  }
}

section {
  padding-block: 40px 60px;

  &:last-of-type {
    margin-bottom: 100px;
  }

  &#navigation {
    padding-block: 30px 40px;

    & .wrap {
      nav {
        color: #757c8a;

        & b {
          color: inherit;
          font-weight: 400;
        }

        &.floors {
          margin-top: 30px;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          gap: 17px;

          & a {
            height: 40px;
            font-size: 18px;
            font-weight: 600;
            translate: 0 5px;
            opacity: 0;
            animation:
              fadeIn var(--duration-200) ease-out forwards,
              returnTranslate var(--duration-200) ease-out forwards;
            --delay-step: 30ms;

            &:nth-of-type(1) {
              animation-delay: calc(50ms + var(--delay-step));
            }

            &:nth-of-type(2) {
              animation-delay: calc(50ms + 2 * var(--delay-step));
            }

            &:nth-of-type(3) {
              animation-delay: calc(50ms + 3 * var(--delay-step));
            }

            &:nth-of-type(4) {
              animation-delay: calc(50ms + 4 * var(--delay-step));
            }

            &:nth-of-type(5) {
              animation-delay: calc(50ms + 5 * var(--delay-step));
            }
          }
        }
      }
    }
  }

  & h1,
  & p,
  & .floor {
    translate: 0 5px;
    opacity: 0;
    animation:
      fadeIn var(--duration-200) ease-out forwards,
      returnTranslate var(--duration-200) ease-out forwards;
  }

  & h1 {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 20px;
    animation-delay: 100ms;

    & .circle {
      width: 62px;
      height: 62px;
      border-radius: 100px;
      background-color: var(--color-primary);
      color: var(--color-secondary);
      font-size: 40px;
      text-align: center;
      line-height: 62px;
    }
  }

  & p {
    margin-bottom: 40px;
    animation-delay: 150ms;
  }

  & .floor {
    max-width: min(1080px, 100%);
    animation-delay: 200ms;

    &#underground {
      object-fit: contain;
      object-position: left;
    }

    &.gotta-fit {
      width: unset;
    }

    & text {
      fill: var(--color-primary);
      font-size: 20px;
      font-weight: 600;
      text-anchor: middle;

      &.unit-code {
        font-weight: 300;
      }
    }

    & .unit {
      outline-offset: 0;

      & path {
        fill: hsl(206, 16%, 20%);
        cursor: pointer;
        opacity: 0;
        transition: opacity var(--duration-200);
      }

      &.taken {
        /* & text {
          display: none;
        } */

        & path {
          cursor: not-allowed;
          opacity: 0.4;
        }
      }

      &:not(.taken) {
        @media (hover: hover) and (pointer: fine) {
          &:hover,
          &:focus-visible {
            & path {
              opacity: 0.2;
            }
          }
        }
      }
    }
  }
}

@media (max-width: 1460px) {
  section {
    &#navigation {
      & .wrap {
        & nav.floors {
          margin-top: 20px;
          gap: 10px;
        }
      }
    }
  }
}

@media (max-width: 1200px) {
  section {
    &:last-of-type {
      margin-bottom: 50px;
    }

    &#navigation {
      & .wrap {
        & nav.floors a {
          height: unset;
          font-size: 16px;
        }
      }
    }

    & h1 {
      margin-bottom: 20px;
      gap: 12px;

      & .circle {
        width: 50px;
        height: 50px;
        line-height: 50px;
        font-size: 32px;
      }
    }

    & p {
      margin-bottom: 30px;
    }
  }
}

@media (max-width: 800px) {
  section {
    padding-block: 40px;

    &#navigation {
      padding-block: 20px;
    }

    & h1 {
      margin-bottom: 20px;
      gap: 12px;

      & .circle {
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 28px;
      }
    }

    & p {
      margin-bottom: 20px;
    }
  }
}