@import "variables";

.content {
  margin: 0 auto 1em;

  &.content_full{
    width: $content-full;
  }

  &.content_wide{
    width: $content-wide;
  }

  &.content_semi-wide{
    width: $content-semi-wide;
  }

  &.content_thin{
    width: $content-thin;
  }

  &.content--padding-top--double{
    padding-top: $double-margin;
    padding-bottom: $single-margin;
  }

  &.content--padding-top--menu{
    padding-top: $menu-thickness + $double-margin;
    padding-bottom: $single-margin;
  }
}

@media screen and (max-width: $mobile-width) {
  $content-mobile: 95%;

  .content {
     &.content_wide{
      width: $content-mobile;
    }

    &.content_semi-wide{
      width: $content-mobile;
    }

    &.content_thin{
      width: $content-mobile;
    }

    &.content--padding-top--menu{
      padding-top: $double-margin;
    }
  }
}

@media screen and (min-width: $tablet-min-width) and (max-width: $tablet-max-width) {
  $thin-value: 70%;
  $wide-value: 95%;
  $semi-wide-value: 80%;

  .content {
    overflow-x: scroll;

    &.content_wide {
      width: $wide-value;
    }

    &.content_semi-wide {
      width: $semi-wide-value;
    }

    &.content_thin {
      width: $thin-value;
    }

    &.content--padding-top--menu {
      padding-top: $menu-thickness + $double-margin;
    }
  }

  @media screen and (orientation: portrait) {
    $wide-value: 100%;
    $thin-value: 80%;
    $semi-wide-value: 95%;

    .content {
      &.content_wide {
        width: $wide-value;
      }

      &.content_semi-wide {
        width: $semi-wide-value;
      }

      &.content_thin {
        width: $thin-value;
      }
    }
  }
}