.container {
  margin-left: 16px;
  margin-right: 16px;
  max-width: 1290px;
  overflow: hidden;
  position: relative;
}

@media (min-width: 768px) {
  .container {
    margin-left: 28px;
    margin-right: 28px;
  }
}

@media (min-width: 1024px) {
  .container {
    margin-left: 32px;
    margin-right: 32px;
  }
}

@media (min-width: 1354px) {
  .container {
    margin-left: auto;
    margin-right: auto;
  }
}

@supports (display: grid) {
  .container {
    display: grid;
    grid-column-gap: var(--grid-column-gap);
    grid-row-gap: var(--grid-row-gap);

    /* stylelint-disable indentation */
    grid-template-columns:
      [full-start]
        var(--grid-column-gutter)
          [container-start]
            repeat(var(--grid-columns), [column-start] var(--grid-column-width))
          [container-end]
        var(--grid-column-gutter)
      [full-end];
    /* stylelint-enable */

    justify-content: center;

    /* Reset grid fallback styles */
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    overflow: initial;
    position: initial;
  }
}