@use "sass:map";
@use "variables";

.fwe-container {
  padding: variables.$container-padding;
  box-sizing: border-box;
  width: 100%;
}

@each $breakpoint in map.keys(variables.$grid-breakpoints) {
  $padding: map.get(variables.$container-paddings, $breakpoint);
  $size: map.get(variables.$grid-breakpoints, $breakpoint);

  @if $size != 0 {
    @media (min-width: $size) {
      .fwe-container {
        padding: $padding;
      }
    }
  }
}

.fwe-layout-1920 {
  display: flex;
  justify-content: center;
  padding: 0px !important;
  .fwe-container {
    padding: 0px !important;
    max-width: 1920px - 128;
    margin-right: 64px;
    margin-left: 64px;
    @media (max-width: variables.$grid-breakpoint-lg) {
      margin-right: 32px;
      margin-left: 32px;
    }
    @media (max-width: variables.$grid-breakpoint-sm) {
      margin-right: 16px;
      margin-left: 16px;
    }
    @media (max-width: variables.$grid-breakpoint-xs) {
      margin-right: 8px;
      margin-left: 8px;
    }
    .fwe-app-logo-container {
      position: unset;
      margin-bottom: 17px;
      margin-right: 24px;
    }
  }
}

.fwe-layout-1440 {
  @extend .fwe-layout-1920;
  .fwe-container {
    max-width: 1440px - 128px;
  }
}

.fwe-layout-1024 {
  @extend .fwe-layout-1920;
  .fwe-container {
    max-width: 1024px - 64px;
  }
}