div#radarLegend {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: center;
  align-items: stretch;
  gap: 0.5rem;
}

.quadrant-wrapper {
  flex: 3 1 calc(100% / 3 - 0.5rem - 2rem);
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  align-content: stretch;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 1rem 0.5rem;
  border: 1px solid var(--color-lowaccent);
  padding: 1rem;
  border-radius: 0.4rem;
}

h2.quadrant {
  flex: 0 0 100%;
  margin: 0;
  font-size: 1.2rem;
  font-weight: bolder;
  opacity: 0.5;
}

.ring-wrapper {
  flex: 2 1 calc(100% / 2 - 0.5rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0.2rem;
}

h3.ring {
  margin: 0;
  font-size: 1rem;
}

.legend-item {
  font-size: 0.8rem;
  opacity: 0.8;
  font-weight: bold;
  border-radius: 5rem;
  padding: 0 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.legend-item:hover {
  background-color: var(--color-accent);
}

@media screen and (max-width: 900px) {
  .quadrant-wrapper {
    flex: 1 1 100%;
  }
}

@media screen and (min-width: 2000px) {
  section {
    position: relative;
  }

  div#radarLegend {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    gap: 0.5rem 1500px;
    align-content: center;
    justify-content: center;
  }

  .quadrant-wrapper {
    flex: calc(100% / 2 - 1400px);
    max-width: 500px;
  }
}

@media screen and (min-width: 2600px) {
  div#radarLegend {
    gap: 0.5rem 2200px;
  }
}

@media screen and (min-width: 3600px) {
  div#radarLegend {
    gap: 0.5rem 2600px;
  }
}

@media screen and (min-width: 4800px) {
  div#radarLegend {
    gap: 0.5rem 3600px;
  }
}

@media screen and (min-width: 7000px) {
  div#radarLegend {
    gap: 0.5rem 5800px;
  }
}

@media screen and (min-width: 8000px) {
  div#radarLegend {
    gap: 0.5rem 6800px;
  }
}