:root {
  --gutter: 32px;
  --desktop-col-width: 102px;
  --landscape-col-width: 78px;
  --tablet-col-width: 90px;
  --mobile-col-width: 72px;
}

.container {
  padding-right: 0;
  margin-right: auto;
  margin-left: auto;
  box-sizing: border-box;
}

.gutter-aside-padding {
  padding: 0 32px;
  padding: 0 var(--gutter, 32px);
  box-sizing: border-box;
}

.half-gutter-padding {
  padding: calc(32px / 2);
  padding: calc(var(--gutter, 32px) / 2);
  box-sizing: border-box;
}

.half-gutter-aside-padding {
  padding: 0 calc(32px / 2);
  padding: 0 calc(var(--gutter, 32px) / 2);
  box-sizing: border-box;
}

.gutter-right {
  padding-right: 32px;
  padding-right: var(--gutter, 32px);
  box-sizing: border-box;
}

.half-gutter-right {
  padding-right: 16px;
  padding-right: calc(var(--gutter, 32px) / 2);
  box-sizing: border-box;
}

.gutter-left {
  padding-left: 32px;
  padding-left: var(--gutter, 32px);
  box-sizing: border-box;
}

.half-gutter-left {
  padding-left: 16px;
  padding-left: calc(var(--gutter, 32px) / 2);
  box-sizing: border-box;
}

.grid-gutter-left + .grid-gutter-left {
  padding-left: 32px;
  padding-left: var(--gutter, 32px);
}

@media (min-width: 1025px) {
  .container {
    max-width: calc(12 * var(--desktop-col-width, 102px) + 2rem);
    width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
  }

  .lg-half-gutter-aside-padding {
    padding: 0 calc(32px / 2);
    padding: 0 calc(var(--gutter, 32px) / 2);
    box-sizing: border-box;
  }

  .lg-gutter-right {
    padding-right: 32px;
    padding-right: var(--gutter, 32px);
    box-sizing: border-box;
  }

  .lg-half-gutter-right {
    padding-right: 16px;
    padding-right: calc(var(--gutter, 32px) / 2);
    box-sizing: border-box;
  }

  .lg-gutter-left {
    padding-left: 32px;
    padding-left: var(--gutter, 32px);
    box-sizing: border-box;
  }

  .lg-half-gutter-left {
    padding-left: 16px;
    padding-left: calc(var(--gutter, 32px) / 2);
    box-sizing: border-box;
  }

  /* MD classes from removed landscape breakpoint */
  .md-half-gutter-aside-padding {
    padding: 0 calc(var(--gutter, 32px) / 2);
    box-sizing: border-box;
  }

  .md-gutter-right {
    padding-right: var(--gutter, 32px);
    box-sizing: border-box;
  }

  .md-half-gutter-right {
    padding-right: calc(var(--gutter, 32px) / 2);
    box-sizing: border-box;
  }

  .md-gutter-left {
    padding-left: var(--gutter, 32px);
    box-sizing: border-box;
  }

  .md-half-gutter-left {
    padding-left: calc(var(--gutter, 32px) / 2);
    box-sizing: border-box;
  }

  .lg-col-1 {
    width: calc(1 * var(--desktop-col-width, 102px));
    box-sizing: border-box;
  }

  .lg-col-2 {
    width: calc(2 * var(--desktop-col-width, 102px));
    box-sizing: border-box;
  }

  .lg-col-3 {
    width: calc(3 * var(--desktop-col-width, 102px));
    box-sizing: border-box;
  }

  .lg-col-4 {
    width: calc(4 * var(--desktop-col-width, 102px));
    vertical-align: top;
    box-sizing: border-box;
  }

  .lg-col-5 {
    width: calc(5 * var(--desktop-col-width, 102px));
    vertical-align: top;
    box-sizing: border-box;
  }

  .lg-col-6 {
    width: calc(6 * var(--desktop-col-width, 102px));
    box-sizing: border-box;
  }

  .lg-col-7 {
    width: calc(7 * var(--desktop-col-width, 102px));
    box-sizing: border-box;
  }

  .lg-col-8 {
    width: calc(8 * var(--desktop-col-width, 102px));
    box-sizing: border-box;
  }

  .lg-col-9 {
    width: calc(9 * var(--desktop-col-width, 102px));
    box-sizing: border-box;
  }

  .lg-col-10 {
    width: calc(10 * var(--desktop-col-width, 102px));
    box-sizing: border-box;
  }

  .lg-col-11 {
    width: calc(11 * var(--desktop-col-width, 102px));
    box-sizing: border-box;
  }

  .lg-col-12 {
    width: calc(12 * var(--desktop-col-width, 102px));
    box-sizing: border-box;
  }

  /* MD columns from removed landscape breakpoint */
  .md-col-1 {
    width: calc(1 * var(--landscape-col-width, 78px));
    box-sizing: border-box;
  }

  .md-col-2 {
    width: calc(2 * var(--landscape-col-width, 78px));
    box-sizing: border-box;
  }

  .md-col-3 {
    width: calc(3 * var(--landscape-col-width, 78px));
    box-sizing: border-box;
  }

  .md-col-4 {
    width: calc(4 * var(--landscape-col-width, 78px));
    vertical-align: top;
    box-sizing: border-box;
  }

  .md-col-5 {
    width: calc(5 * var(--landscape-col-width, 78px));
    vertical-align: top;
    box-sizing: border-box;
  }

  .md-col-6 {
    width: calc(6 * var(--landscape-col-width, 78px));
    box-sizing: border-box;
  }

  .md-col-7 {
    width: calc(7 * var(--landscape-col-width, 78px));
    box-sizing: border-box;
  }

  .md-col-8 {
    width: calc(8 * var(--landscape-col-width, 78px));
    box-sizing: border-box;
  }

  .md-col-9 {
    width: calc(9 * var(--landscape-col-width, 78px));
    box-sizing: border-box;
  }

  .md-col-10 {
    width: calc(10 * var(--landscape-col-width, 78px));
    box-sizing: border-box;
  }

  .md-col-11 {
    width: calc(11 * var(--landscape-col-width, 78px));
    box-sizing: border-box;
  }

  .md-col-12 {
    width: calc(12 * var(--landscape-col-width, 78px));
    box-sizing: border-box;
  }

  .grid-gutter-left:nth-child(3n + 1) {
    padding-left: 0;
  }
}

/* Tablet: 8 columnas */
@media (min-width: 768px) and (max-width: 899px) {
  .container {
    width: calc(8 * var(--tablet-col-width, 90px) + 1rem);
    max-width: 100%;
  }
}

/* Tablet: 9 columnas */
@media (min-width: 900px) and (max-width: 949px) {
  .container {
    width: calc(9 * var(--tablet-col-width, 90px) + 1rem);
    max-width: 100%;
  }
}

/* Tablet: 10 columnas */
@media (min-width: 950px) and (max-width: 1024px) {
  .container {
    width: calc(10 * var(--tablet-col-width, 90px) + 1rem);
    max-width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .sm-half-gutter-aside-padding {
    padding: 0 calc(32px / 2);
    padding: 0 calc(var(--gutter, 32px) / 2);
    box-sizing: border-box;
  }

  .sm-gutter-right {
    padding-right: 32px;
    padding-right: var(--gutter, 32px);
    box-sizing: border-box;
  }

  .sm-half-gutter-right {
    padding-right: 16px;
    padding-right: calc(var(--gutter, 32px) / 2);
    box-sizing: border-box;
  }

  .sm-gutter-left {
    padding-left: 32px;
    padding-left: var(--gutter, 32px);
    box-sizing: border-box;
  }

  .sm-half-gutter-left {
    padding-left: 16px;
    padding-left: calc(var(--gutter, 32px) / 2);
    box-sizing: border-box;
  }

  .sm-col-1 {
    width: calc(1 * 90px);
    width: calc(1 * var(--tablet-col-width, 90px));
    box-sizing: border-box;
  }

  .sm-col-2 {
    width: calc(2 * 90px);
    width: calc(2 * var(--tablet-col-width, 90px));
    box-sizing: border-box;
  }

  .sm-col-3 {
    width: calc(3 * 90px);
    width: calc(3 * var(--tablet-col-width, 90px));
    box-sizing: border-box;
  }

  .sm-col-4 {
    width: calc(4 * 90px);
    width: calc(4 * var(--tablet-col-width, 90px));
    box-sizing: border-box;
  }

  .sm-col-5 {
    width: calc(5 * 90px);
    width: calc(5 * var(--tablet-col-width, 90px));
    box-sizing: border-box;
  }

  .sm-col-6 {
    width: calc(6 * 90px);
    width: calc(6 * var(--tablet-col-width, 90px));
    box-sizing: border-box;
  }

  .sm-col-7 {
    width: calc(7 * 90px);
    width: calc(7 * var(--tablet-col-width, 90px));
    box-sizing: border-box;
  }

  .sm-col-8 {
    width: calc(8 * 90px);
    width: calc(8 * var(--tablet-col-width, 90px));
    box-sizing: border-box;
  }

  .grid-gutter-left:nth-child(2n + 1) {
    padding-left: 0;
  }
}

@media (max-width: 767px) {
  .container {
    width: auto;
  }

  .xs-half-gutter-aside-padding {
    padding: 0 calc(32px / 2);
    padding: 0 calc(var(--gutter, 32px) / 2);
    box-sizing: border-box;
  }

  .xs-gutter-right {
    padding-right: 32px;
    padding-right: var(--gutter, 32px);
    box-sizing: border-box;
  }

  .xs-half-gutter-right {
    padding-right: 16px;
    padding-right: calc(var(--gutter, 32px) / 2);
    box-sizing: border-box;
  }

  .xs-quarter-gutter-right {
    padding-right: 8px;
    padding-right: calc(var(--gutter, 32px) / 4);
    box-sizing: border-box;
  }

  .xs-gutter-left {
    padding-left: 32px;
    padding-left: var(--gutter, 32px);
    box-sizing: border-box;
  }

  .xs-half-gutter-left {
    padding-left: 16px;
    padding-left: calc(var(--gutter, 32px) / 2);
    box-sizing: border-box;
  }

  .xs-col-1 {
    width: calc(1 * 72px);
    width: calc(1 * var(--mobile-col-width, 72px));
    box-sizing: border-box;
  }

  .xs-col-2 {
    width: calc(2 * 72px);
    width: calc(2 * var(--mobile-col-width, 72px));
    box-sizing: border-box;
  }

  .xs-col-3 {
    width: calc(3 * 72px);
    width: calc(3 * var(--mobile-col-width, 72px));
    box-sizing: border-box;
  }

  .xs-col-4 {
    width: calc(4 * 72px);
    width: calc(4 * var(--mobile-col-width, 72px));
    box-sizing: border-box;
  }

  .xs-no-aside-gutter {
    padding-right: 0;
    padding-left: 0;
  }

  .grid-gutter-left + .grid-gutter-left {
    padding-left: 0;
  }
}