#map {
  height: 600px;
  width: 100%;

  .content-box {
    overflow: hidden;
    white-space: nowrap;

    h1 {
      padding: 0;
      margin: 0;

      a {
        display: flex;
        flex-direction: column;
        justify-content: start;

        img {
          &.location {
            width: auto;
            margin-block-start: 0.25rem;
            margin-block-end: 0.5rem;
          }

          &.category {
            height: 20px;
            width: fit-content;
          }
        }

        &:hover {
          color: var(--aa-fuschia);
          text-decoration: underline;
        }
      }
    }

    h2 {
      padding: 0 0 0.25rem 0;
      margin: 0;
      font-size: 14px;

      a {
        color: var(--aa-blue);
        text-decoration: none;

        &:hover {
          color: var(--aa-fuschia);
          text-decoration: underline;
        }
      }
    }

    .body {
      color: var(--aa-orange);
      font-size: 12px;
    }
  }
}

.map-key-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2rem;
}

.map-column {
  display: flex;
  flex-direction: column;

  div {
    padding: 0.5rem;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
  }
}

.map-key {
  margin-block: 2rem;
  margin-inline: 1rem;
}

@media all and (min-width: 200px) and (max-width: 667px) {
  .map-key {
    margin: 0.5rem 0.5rem 2rem 0.5rem;

    h3 {
      padding-block-start: 0;
    }
  }

  .map-key-container {
    flex-direction: column;
    gap: 0;

    img {
      height: 20px;
      width: auto;
    }
  }
}