.overview-network-stats {
  display: grid;

  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--spacing-s);
  padding: 0 var(--spacing-xs) var(--spacing-xs);
  align-items: stretch;
  overflow-x: auto;

  @include media-breakpoint-up(lg) {
    overflow-x: unset;
  }

  @include media-breakpoint-up(xl) {
    grid-template-columns: 850px 1fr;
    grid-template-rows: 1fr;
  }

  @include media-breakpoint-up(xxl) {
    grid-template-columns: auto 1fr;
  }

  & > .summary {
    position: relative;
    width: 100%;
    box-shadow: 5px 5px 15px #00000005;
    background-color: var(--white);
    border-radius: 15px;
    display: flex;
    align-items: stretch;
    align-content: center;
    justify-content: flex-start;
    flex-flow: row nowrap;
    min-height: 120px;
    min-width: 800px;

    & > .info {
      display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: flex-start;
      row-gap: var(--spacing-xs);
      padding: var(--spacing-s) 5px;
      min-width: 155px;

      &:not(:first-child) {
        border-left: 1px solid var(--border-primary);
      }

      &.network-usage {
        row-gap: var(--spacing-m);
      }

      &:not(.network-usage) {
        .info-title {
          min-height: 29px;
        }
      }

      .info-title {
        color: var(--text-body-tertiary);
        text-align: center;
        @include typography(app-modal-1);
        max-width: 120px;
      }

      .info-track {
        width: 100%;
        display: flex;
        flex-flow: row;
        align-items: center;
        justify-content: center;
        column-gap: var(--spacing-xs);
        max-height: 42px;

        .info-count {
          @include typography(app-title);
        }
      }

      .info-sub-title {
        color: var(--text-body-tertiary);
        @include typography(app-modal-3);
      }

      .network-usage-track {
        display: flex;
        flex-flow: row;
        align-items: center;
        justify-content: center;
        column-gap: var(--spacing-xs);

        & > :nth-child(1) {
          svg {
            transform: rotate(-90deg);
          }
        }

        & > :nth-child(2) {
          svg {
            transform: rotate(-90deg);
          }
        }

        .network-speed {
          &.download {
            svg {
              transform: rotate(90deg);
            }
          }
        }

        .network-usage {
          & > span {
            @include typography(app-modal-1);
          }
        }
      }
    }
  }

  & > .activity-graph {
    padding: 1.5rem 2rem 1rem;
    box-sizing: border-box;
    border-radius: 15px;
    background-color: var(--white);
    box-shadow: 5px 5px 15px #00000005;
    min-height: 120px;
    display: grid;
    grid-template-rows: 21px 1fr;
    grid-template-columns: 1fr;
    row-gap: 15px;
    width: 100%;

    & > .chart {
      grid-row: 2;
      grid-column: 1 / 2;
    }

    & > header {
      grid-row: 1;
      grid-column: 1 / 2;
      display: flex;
      flex-direction: row;
      align-items: center;
      align-content: center;
      justify-content: flex-start;

      h3 {
        @include typography-legacy(15px, 21px, medium, var(--text-main), 'Poppins');

        @include media-breakpoint-down(md) {
          text-transform: uppercase;
          @include text-weight(semiBold);
        }

        @include media-breakpoint-up(md) {
        }
      }

      & > .peaks {
        margin-left: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        align-content: center;
        justify-content: flex-start;
        height: 17px;

        @include media-breakpoint-down(md) {
          column-gap: 1rem;
        }

        @include media-breakpoint-up(md) {
          column-gap: 2rem;
        }

        & > span {
          @include media-breakpoint-down(md) {
            &:first-of-type {
              display: none;
            }
          }

          @include typography-legacy(12px, 17px, medium, var(--gray-light), 'Poppins');
        }

        & > .network-speed {
          display: flex;
          flex-direction: row;
          align-items: center;
          align-content: center;
          justify-content: flex-start;
          column-gap: 0.4rem;
        }
      }
    }

    & > .network-speed {
      margin-top: 1rem;
    }
  }
}
