$inapp-min-width: 320px;
$inapp-max-width: 800px;
$inapp-min-height: 400px;
$inapp-max-height: calc(100vh - 80px);
$inapp-content-max-width: 522px;
$inapp-image-max-height: 400px;
$inapp-avatar-size: 40px;
$inapp-header-max-height: $inapp-avatar-size;

$inapp-breakpoint-mobile-horizontal: 572px;
$inapp-breakpoint-text-only: 400px;
$inapp-breakpoint-single-column: 640px;

@mixin inapp-media-mobile-horizontal {
  @media screen and (max-height: #{$inapp-breakpoint-mobile-horizontal - 1px}) {
    @content;
  }
}

@mixin inapp-media-text {
  @media screen and (max-width: #{$inapp-breakpoint-text-only - 1px}) {
    @content;
  }
}

@mixin inapp-media-single-column {
  @media screen and (min-width: #{$inapp-breakpoint-text-only}) and (max-width: #{$inapp-breakpoint-single-column - 1px}) {
    @content;
  }
}

@mixin inapp-media-two-columns {
  @media screen and (min-width: #{$inapp-breakpoint-single-column}) {
    @content;
  }
}