@use "design-system";

.snaps {
  $height-screen-sm-max: 100%;
  $width-screen-sm-min: 85vw;
  $width-screen-md-min: 80vw;
  $width-screen-lg-min: 62vw;

  width: 100%;
  flex-flow: column nowrap;

  @include design-system.screen-sm-max {
    height: $height-screen-sm-max;
  }

  @include design-system.screen-sm-min {
    width: $width-screen-sm-min;
  }

  @include design-system.screen-md-min {
    width: $width-screen-md-min;
  }

  @include design-system.screen-lg-min {
    width: $width-screen-lg-min;
  }

  &__content {
    padding: 0;

    &__list {
      &__wrapper {
        @include design-system.screen-md-min {
          margin-top: 24px;
          margin-left: 24px;
          margin-right: 24px;
        }
      }

      &__container--no-snaps_inner {
        max-width: 164px;
        align-self: flex-end;
      }

      &__no-snaps_icon {
        font-size: 48px;
      }

      &__container--no-snaps_banner-tip {
        max-width: 390px;
      }
    }
  }
}
