.chart {
  padding: 8rem 0;
  background: $base-blue;
  width: 100%;
}

.chart-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4.8rem;
}

.tab {
  // width: 47.7rem;
  width: 100%;
  text-align: center;
  height: 5.9rem;
  color: $base-white;
  font-size: 1.8rem;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
  background: transparent;
  border-radius: 0.5rem;

  &::after {
    content: '';
    width: 100%;
    position: absolute;
    bottom: 0;
    height: 0.1rem;
    background: $base-bright-blue;
    transition: all 0.3s ease;
    border-radius: 0.5rem;
  }

  span {
    z-index: 20;
  }
}

.tab:hover.tab::after {
  height: 100%;
}

.chart-tabs {
  display: flex;
  width: 100%;
  gap: 2.4rem;

  .active.tab::after {
    height: 100%;
  }
}

.chart-data {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2.4rem;
}

@media (max-width: 1500px) {
  .tab {
    height: 5.9rem;
    font-size: 1.8rem;
  }

  .line-chart-wrapper {
    display: flex;
    justify-content: center;
  }
}

@media (max-width: 1200px) {
  .tab {
    font-size: 1.4rem;
  }

  .chart-data {
    flex-direction: column;
  }
}

@media (max-width: 1100px) {
  .chart-data {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
}

@media (max-width: 500px) {
  .chart-wrapper {
    gap: 2.4rem;
  }

  .tab {
    font-size: 1.3rem;
    height: 4.8rem;
  }

  .chart-data {
    gap: 2.4rem;
  }

  .chart-tabs {
    flex-direction: column;
    gap: 1.6rem;
  }

  .tab {
    width: 100%;
    font-size: 1.2rem;
  }

  .line-chart-wrapper {
    width: 100%;
    height: 100%;
  }
}
