@media (max-width: 1199px) {
  :root {
    --grid-gutter: 40px;
    --grid-columns: 8;
    --grid-gap: 24px;
  }

  .grid-container {
    box-sizing: border-box;
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--grid-gutter) !important;
    padding-right: var(--grid-gutter) !important;
  }

  .grid-container .grid-container,
  .grid-container .container,
  .grid-container .container1,
  .grid-container .container2,
  .grid-container .container3 {
    box-sizing: border-box;
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .grid-container .grid-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .grid-container img,
  .grid-container iframe,
  .grid-container video {
    max-width: 100%;
  }

  .grid-x {
    display: grid !important;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    column-gap: var(--grid-gap);
    row-gap: var(--grid-gap);
  }
  .grid-x > .cell {
    grid-column: 1 / -1;
    box-sizing: border-box;
    min-width: 0;
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .grid-x > .medium-1 { grid-column: span 1; }
  .grid-x > .medium-2 { grid-column: span 2; }
  .grid-x > .medium-3 { grid-column: span 3; }
  .grid-x > .medium-4 { grid-column: span 4; }
  .grid-x > .medium-5 { grid-column: span 5; }
  .grid-x > .medium-6 { grid-column: span 6; }
  .grid-x > .medium-7 { grid-column: span 7; }
  .grid-x > .medium-8 { grid-column: span 8; }
}

@media (max-width: 767px) {
  :root {
    --grid-gutter: 24px;
    --grid-columns: 4;
    --grid-gap: 16px;
  }

  .grid-x > .cell { grid-column: 1 / -1; }
  .grid-x > .small-1 { grid-column: span 1; }
  .grid-x > .small-2 { grid-column: span 2; }
  .grid-x > .small-3 { grid-column: span 3; }
  .grid-x > .small-4 { grid-column: span 4; }
}