@use '../abstracts/mixins' as *;

.flow-container {
  width: 100%;
  max-width: var(--flow-container-char-width, 85ch);

  > * + * {
    margin-block-start: var(--flow-spacing);
  }
}

.container {
  --container-padding: 1em;
  --container-margin: 0;
  //display: block;
  margin-right: var(--container-margin) !important;
  margin-left: var(--container-margin) !important;

  padding-right: var(--container-padding);
  padding-left: var(--container-padding);

  max-width: 100vw;
}

.container-fluid {
  --container-padding: 1em;
  --container-margin: 0;
  //display: block;

  max-width: 100vw;
  //max-width: 97vw;
  padding-right: calc(var(--container-margin) + var(--container-padding)) !important;
  padding-left: calc(var(--container-margin) + var(--container-padding)) !important;
}

@include mq(tablet) {
  .container,
  .container-fluid {
    --container-margin: 2vw;
  }
}

@include mq(tablet-medium) {
  .container,
  .container-fluid {
    --container-padding: 1em;
    --container-margin: 5vw;
  }
}

@include mq(desktop) {
  .container,
  .container-fluid {
    --container-padding: 1.5em;
    --container-margin: 7vw;
  }
}

@include mq(desktop-lg) {
  .container,
  .container-fluid {
    --container-padding: 2em;
    --container-margin: 10vw;
  }
}

@include mq(desktop-xlg) {
  .container,
  .container-fluid {
    --container-margin: 15vw;
  }
}

[data-responsive='auto'] body > footer,
[data-responsive='auto'] body > header,
[data-responsive='auto'] body > main {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

[data-responsive='auto'] body > main {
  padding: var(--inner-v-spacing) var(--inner-h-spacing);
}

@include mq(mobile) {
  [data-responsive='auto'] body > footer,
  [data-responsive='auto'] body > header,
  [data-responsive='auto'] body > main {
    max-width: 570px;
  }
}

@include mq(tablet) {
  [data-responsive='auto'] body > footer,
  [data-responsive='auto'] body > header,
  [data-responsive='auto'] body > main {
    max-width: 760px;
  }
}

@include mq(tablet-medium) {
  [data-responsive='auto'] body > footer,
  [data-responsive='auto'] body > header,
  [data-responsive='auto'] body > main {
    max-width: 840px;
    padding-right: 0;
    padding-left: 0;
  }
}

@include mq(desktop) {
  [data-responsive='auto'] body > footer,
  [data-responsive='auto'] body > header,
  [data-responsive='auto'] body > main {
    max-width: 960px;
  }
}

@include mq(desktop-medium) {
  [data-responsive='auto'] body > footer,
  [data-responsive='auto'] body > header,
  [data-responsive='auto'] body > main {
    max-width: 1200px;
  }
}

//@include mq(desktop-lg) {
//  [data-responsive='auto'] body > footer,
//  [data-responsive='auto'] body > header,
//  [data-responsive='auto'] body > main {
//    max-width: 1440px;
//  }
//}
//
//@include mq(desktop-xlg) {
//  [data-responsive='auto'] body > footer,
//  [data-responsive='auto'] body > header,
//  [data-responsive='auto'] body > main {
//    max-width: 1600px;
//  }
//}