@import '../../styles/_main';

.Analytics {
  $r: &;
  @extend %container;

  position: relative;
  width: 100%;
  background-color: $c_catskill_white;
  border-radius: $border-radius;

  &--large {
    max-width: initial;

    #{$r} {
      &__content {
        position: static;
        display: flex;
        justify-content: center;
        padding: 40px 0 60px;
        transform: none;
      }

      &__container {
        @extend %container;

        max-width: 1400px;
        padding: 20px 32px 60px;
      }
    }
  }

  &__container {
    display: flex;
    flex-wrap: wrap;
    padding: 20px 0 60px;
    border-radius: $border-radius;

    & > * {
      flex-basis: 100%;
    }
  }

  &__content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    transform: translate(0, 50%);
  }

  &__title {
    padding: 40px 0 0;
    font-size: 30px;
    line-height: 38px;
    color: $c_blue-ribbon;
    text-align: center;
  }

  @media #{media-min-width(450px)} {
    &__container {
      & > * {
        flex-basis: calc(100% / 2);
      }
    }
  }

  @media #{$screen-sm} {
    &__container {
      padding-right: 20px;
      padding-left: 20px;

      & > * {
        flex-basis: calc(100% / 3);
      }
    }

    &__content {
      left: 50%;
      width: auto;
      transform: translate(-50%, 50%);
    }
  }

  @media #{$screen-md} {
    background-image:
      url('../../assets/background/stats-corner-left.png'),
      url('../../assets/background/stats-corner-right.png');
    background-position: bottom left, bottom right;
    background-repeat: no-repeat;

    &__container {
      & > * {
        flex-basis: calc(100% / 4);
      }
    }

    &__title {
      font-size: 40px;
      line-height: 45px;
    }
  }

  @media #{$screen-lg} {
    &--large {
      padding: 70px 0 90px;

      #{$r} {
        &__container {
          padding: 20px 32px 60px;
        }
      }
    }
  }
}
