You are here

Home » API reference » Paragraphs grid 8

mdc_grid.css in Paragraphs grid 8 

:root {
  --mdc-layout-grid-margin-desktop: 24px;
  --mdc-layout-grid-gutter-desktop: 24px;
  --mdc-layout-grid-column-width-desktop: 72px;
  --mdc-layout-grid-margin-tablet: 16px;
  --mdc-layout-grid-gutter-tablet: 16px;
  --mdc-layout-grid-column-width-tablet: 72px;
  --mdc-layout-grid-margin-phone: 16px;
  --mdc-layout-grid-gutter-phone: 16px;
  --mdc-layout-grid-column-width-phone: 72px;
}
@media (min-width: 840px) {
  .mdc-layout-grid {
    box-sizing: border-box;
    margin: 0 auto;
    padding: 24px;
    padding: var(--mdc-layout-grid-margin-desktop, 24px);
  }
}
@media (min-width: 480px) and (max-width: 839px) {
  .mdc-layout-grid {
    box-sizing: border-box;
    margin: 0 auto;
    padding: 16px;
    padding: var(--mdc-layout-grid-margin-tablet, 16px);
  }
}
@media (max-width: 479px) {
  .mdc-layout-grid {
    box-sizing: border-box;
    margin: 0 auto;
    padding: 16px;
    padding: var(--mdc-layout-grid-margin-phone, 16px);
  }
}
@media (min-width: 840px) {
  .mdc-layout-grid__inner {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
    margin: -12px;
    margin: calc(var(--mdc-layout-grid-gutter-desktop, 24px) / 2 * -1);
  }
  @supports (display: grid) {
    .mdc-layout-grid__inner {
      display: grid;
      margin: 0;
      grid-gap: 24px;
      grid-gap: var(--mdc-layout-grid-gutter-desktop, 24px);
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
  }
}
@media (min-width: 480px) and (max-width: 839px) {
  .mdc-layout-grid__inner {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
    margin: -8px;
    margin: calc(var(--mdc-layout-grid-gutter-tablet, 16px) / 2 * -1);
  }
  @supports (display: grid) {
    .mdc-layout-grid__inner {
      display: grid;
      margin: 0;
      grid-gap: 16px;
      grid-gap: var(--mdc-layout-grid-gutter-tablet, 16px);
      grid-template-columns: repeat(8, minmax(0, 1fr));
    }
  }
}
@media (max-width: 479px) {
  .mdc-layout-grid__inner {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
    margin: -8px;
    margin: calc(var(--mdc-layout-grid-gutter-phone, 16px) / 2 * -1);
  }
  @supports (display: grid) {
    .mdc-layout-grid__inner {
      display: grid;
      margin: 0;
      grid-gap: 16px;
      grid-gap: var(--mdc-layout-grid-gutter-phone, 16px);
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
}
@media (min-width: 840px) {
  .mdc-layout-grid__cell {
    width: calc(33.33333% - 24px);
    width: calc(33.33333% - var(--mdc-layout-grid-gutter-desktop, 24px));
    box-sizing: border-box;
    margin: 12px;
    margin: calc(var(--mdc-layout-grid-gutter-desktop, 24px) / 2);
  }
  @supports (display: grid) {
    .mdc-layout-grid__cell {
      width: auto;
      grid-column-end: span 4;
    }
  }
  @supports (display: grid) {
    .mdc-layout-grid__cell {
      margin: 0;
    }
  }
  .mdc-layout-grid__cell--span-1,
  .mdc-layout-grid__cell--span-1-desktop {
    width: calc(8.33333% - 24px);
    width: calc(8.33333% - var(--mdc-layout-grid-gutter-desktop, 24px));
  }
  @supports (display: grid) {
    .mdc-layout-grid__cell--span-1,
    .mdc-layout-grid__cell--span-1-desktop {
      width: auto;
      grid-column-end: span 1;
    }
  }
  .mdc-layout-grid__cell--span-2,
  .mdc-layout-grid__cell--span-2-desktop {
    width: calc(16.66667% - 24px);
    width: calc(16.66667% - var(--mdc-layout-grid-gutter-desktop, 24px));
  }
  @supports (display: grid) {
    .mdc-layout-grid__cell--span-2,
    .mdc-layout-grid__cell--span-2-desktop {
      width: auto;
      grid-column-end: span 2;
    }
  }
  .mdc-layout-grid__cell--span-3,
  .mdc-layout-grid__cell--span-3-desktop {
    width: calc(25% - 24px);
    width: calc(25% - var(--mdc-layout-grid-gutter-desktop, 24px));
  }
  @supports (display: grid) {
    .mdc-layout-grid__cell--span-3,
    .mdc-layout-grid__cell--span-3-desktop {
      width: auto;
      grid-column-end: span 3;
    }
  }
  .mdc-layout-grid__cell--span-4,
  .mdc-layout-grid__cell--span-4-desktop {
    width: calc(33.33333% - 24px);
    width: calc(33.33333% - var(--mdc-layout-grid-gutter-desktop, 24px));
  }
  @supports (display: grid) {
    .mdc-layout-grid__cell--span-4,
    .mdc-layout-grid__cell--span-4-desktop {
      width: auto;
      grid-column-end: span 4;
    }
  }
  .mdc-layout-grid__cell--span-5,
  .mdc-layout-grid__cell--span-5-desktop {
    width: calc(41.66667% - 24px);
    width: calc(41.66667% - var(--mdc-layout-grid-gutter-desktop, 24px));
  }
  @supports (display: grid) {
    .mdc-layout-grid__cell--span-5,
    .mdc-layout-grid__cell--span-5-desktop {
      width: auto;
      grid-column-end: span 5;
    }
  }
  .mdc-layout-grid__cell--span-6,
  .mdc-layout-grid__cell--span-6-desktop {
    width: calc(50% - 24px);
    width: calc(50% - var(--mdc-layout-grid-gutter-desktop, 24px));
  }
  @supports (display: grid) {
    .mdc-layout-grid__cell--span-6,
    .mdc-layout-grid__cell--span-6-desktop {
      width: auto;
      grid-column-end: span 6;
    }
  }
  .mdc-layout-grid__cell--span-7,
  .mdc-layout-grid__cell--span-7-desktop {
    width: calc(58.33333% - 24px);
    width: calc(58.33333% - var(--mdc-layout-grid-gutter-desktop, 24px));
  }
  @supports (display: grid) {
    .mdc-layout-grid__cell--span-7,
    .mdc-layout-grid__cell--span-7-desktop {
      width: auto;
      grid-column-end: span 7;
    }
  }
  .mdc-layout-grid__cell--span-8,
  .mdc-layout-grid__cell--span-8-desktop {
    width: calc(66.66667% - 24px);
    width: calc(66.66667% - var(--mdc-layout-grid-gutter-desktop, 24px));
  }
  @supports (display: grid) {
    .mdc-layout-grid__cell--span-8,
    .mdc-layout-grid__cell--span-8-desktop {
      width: auto;
      grid-column-end: span 8;
    }
  }
  .mdc-layout-grid__cell--span-9,
  .mdc-layout-grid__cell--span-9-desktop {
    width: calc(75% - 24px);
    width: calc(75% - var(--mdc-layout-grid-gutter-desktop, 24px));
  }
  @supports (display: grid) {
    .mdc-layout-grid__cell--span-9,
    .mdc-layout-grid__cell--span-9-desktop {
      width: auto;
      grid-column-end: span 9;
    }
  }
  .mdc-layout-grid__cell--span-10,
  .mdc-layout-grid__cell--span-10-desktop {
    width: calc(83.33333% - 24px);
    width: calc(83.33333% - var(--mdc-layout-grid-gutter-desktop, 24px));
  }
  @supports (display: grid) {
    .mdc-layout-grid__cell--span-10,
    .mdc-layout-grid__cell--span-10-desktop {
      width: auto;
      grid-column-end: span 10;
    }
  }
  .mdc-layout-grid__cell--span-11,
  .mdc-layout-grid__cell--span-11-desktop {
    width: calc(91.66667% - 24px);
    width: calc(91.66667% - var(--mdc-layout-grid-gutter-desktop, 24px));
  }
  @supports (display: grid) {
    .mdc-layout-grid__cell--span-11,
    .mdc-layout-grid__cell--span-11-desktop {
      width: auto;
      grid-column-end: span 11;
    }
  }
  .mdc-layout-grid__cell--span-12,
  .mdc-layout-grid__cell--span-12-desktop {
    width: calc(100% - 24px);
    width: calc(100% - var(--mdc-layout-grid-gutter-desktop, 24px));
  }
  @supports (display: grid) {
    .mdc-layout-grid__cell--span-12,
    .mdc-layout-grid__cell--span-12-desktop {
      width: auto;
      grid-column-end: span 12;
    }
  }
}
@media (min-width: 480px) and (max-width: 839px) {
  .mdc-layout-grid__cell {
    width: calc(50% - 16px);
    width: calc(50% - var(--mdc-layout-grid-gutter-tablet, 16px));
    box-sizing: border-box;
    margin: 8px;
    margin: calc(var(--mdc-layout-grid-gutter-tablet, 16px) / 2);
  }
  @supports (display: grid) {
    .mdc-layout-grid__cell {
      width: auto;
      grid-column-end: span 4;
    }
  }
  @supports (display: grid) {
    .mdc-layout-grid__cell {
      margin: 0;
    }
  }
  .mdc-layout-grid__cell--span-1,
  .mdc-layout-grid__cell--span-1-tablet {
    width: calc(12.5% - 16px);
    width: calc(12.5% - var(--mdc-layout-grid-gutter-tablet, 16px));
  }
  @supports (display: grid) {
    .mdc-layout-grid__cell--span-1,
    .mdc-layout-grid__cell--span-1-tablet {
      width: auto;
      grid-column-end: span 1;
    }
  }
  .mdc-layout-grid__cell--span-2,
  .mdc-layout-grid__cell--span-2-tablet {
    width: calc(25% - 16px);
    width: calc(25% - var(--mdc-layout-grid-gutter-tablet, 16px));
  }
  @supports (display: grid) {
    .mdc-layout-grid__cell--span-2,
    .mdc-layout-grid__cell--span-2-tablet {
      width: auto;
      grid-column-end: span 2;
    }
  }
  .mdc-layout-grid__cell--span-3,
  .mdc-layout-grid__cell--span-3-tablet {
    width: calc(37.5% - 16px);
    width: calc(37.5% - var(--mdc-layout-grid-gutter-tablet, 16px));
  }
  @supports (display: grid) {
    .mdc-layout-grid__cell--span-3,
    .mdc-layout-grid__cell--span-3-tablet {
      width: auto;
      grid-column-end: span 3;
    }
  }
  .mdc-layout-grid__cell--span-4,
  .mdc-layout-grid__cell--span-4-tablet {
    width: calc(50% - 16px);
    width: calc(50% - var(--mdc-layout-grid-gutter-tablet, 16px));
  }
  @supports (display: grid) {
    .mdc-layout-grid__cell--span-4,
    .mdc-layout-grid__cell--span-4-tablet {
      width: auto;
      grid-column-end: span 4;
    }
  }
  .mdc-layout-grid__cell--span-5,
  .mdc-layout-grid__cell--span-5-tablet {
    width: calc(62.5% - 16px);
    width: calc(62.5% - var(--mdc-layout-grid-gutter-tablet, 16px));
  }
  @supports (display: grid) {
    .mdc-layout-grid__cell--span-5,
    .mdc-layout-grid__cell--span-5-tablet {
      width: auto;
      grid-column-end: span 5;
    }
  }
  .mdc-layout-grid__cell--span-6,
  .mdc-layout-grid__cell--span-6-tablet {
    width: calc(75% - 16px);
    width: calc(75% - var(--mdc-layout-grid-gutter-tablet, 16px));
  }
  @supports (display: grid) {
    .mdc-layout-grid__cell--span-6,
    .mdc-layout-grid__cell--span-6-tablet {
      width: auto;
      grid-column-end: span 6;
    }
  }
  .mdc-layout-grid__cell--span-7,
  .mdc-layout-grid__cell--span-7-tablet {
    width: calc(87.5% - 16px);
    width: calc(87.5% - var(--mdc-layout-grid-gutter-tablet, 16px));
  }
  @supports (display: grid) {
    .mdc-layout-grid__cell--span-7,
    .mdc-layout-grid__cell--span-7-tablet {
      width: auto;
      grid-column-end: span 7;
    }
  }
  .mdc-layout-grid__cell--span-8,
  .mdc-layout-grid__cell--span-8-tablet {
    width: calc(100% - 16px);
    width: calc(100% - var(--mdc-layout-grid-gutter-tablet, 16px));
  }
  @supports (display: grid) {
    .mdc-layout-grid__cell--span-8,
    .mdc-layout-grid__cell--span-8-tablet {
      width: auto;
      grid-column-end: span 8;
    }
  }
  .mdc-layout-grid__cell--span-9,
  .mdc-layout-grid__cell--span-9-tablet {
    width: calc(100% - 16px);
    width: calc(100% - var(--mdc-layout-grid-gutter-tablet, 16px));
  }
  @supports (display: grid) {
    .mdc-layout-grid__cell--span-9,
    .mdc-layout-grid__cell--span-9-tablet {
      width: auto;
      grid-column-end: span 8;
    }
  }
  .mdc-layout-grid__cell--span-10,
  .mdc-layout-grid__cell--span-10-tablet {
    width: calc(100% - 16px);
    width: calc(100% - var(--mdc-layout-grid-gutter-tablet, 16px));
  }
  @supports (display: grid) {
    .mdc-layout-grid__cell--span-10,
    .mdc-layout-grid__cell--span-10-tablet {
      width: auto;
      grid-column-end: span 8;
    }
  }
  .mdc-layout-grid__cell--span-11,
  .mdc-layout-grid__cell--span-11-tablet {
    width: calc(100% - 16px);
    width: calc(100% - var(--mdc-layout-grid-gutter-tablet, 16px));
  }
  @supports (display: grid) {
    .mdc-layout-grid__cell--span-11,
    .mdc-layout-grid__cell--span-11-tablet {
      width: auto;
      grid-column-end: span 8;
    }
  }
  .mdc-layout-grid__cell--span-12,
  .mdc-layout-grid__cell--span-12-tablet {
    width: calc(100% - 16px);
    width: calc(100% - var(--mdc-layout-grid-gutter-tablet, 16px));
  }
  @supports (display: grid) {
    .mdc-layout-grid__cell--span-12,
    .mdc-layout-grid__cell--span-12-tablet {
      width: auto;
      grid-column-end: span 8;
    }
  }
}
@media (max-width: 479px) {
  .mdc-layout-grid__cell {
    width: calc(100% - 16px);
    width: calc(100% - var(--mdc-layout-grid-gutter-phone, 16px));
    box-sizing: border-box;
    margin: 8px;
    margin: calc(var(--mdc-layout-grid-gutter-phone, 16px) / 2);
  }
  @supports (display: grid) {
    .mdc-layout-grid__cell {
      width: auto;
      grid-column-end: span 4;
    }
  }
  @supports (display: grid) {
    .mdc-layout-grid__cell {
      margin: 0;
    }
  }
  .mdc-layout-grid__cell--span-1,
  .mdc-layout-grid__cell--span-1-phone {
    width: calc(25% - 16px);
    width: calc(25% - var(--mdc-layout-grid-gutter-phone, 16px));
  }
  @supports (display: grid) {
    .mdc-layout-grid__cell--span-1,
    .mdc-layout-grid__cell--span-1-phone {
      width: auto;
      grid-column-end: span 1;
    }
  }
  .mdc-layout-grid__cell--span-2,
  .mdc-layout-grid__cell--span-2-phone {
    width: calc(50% - 16px);
    width: calc(50% - var(--mdc-layout-grid-gutter-phone, 16px));
  }
  @supports (display: grid) {
    .mdc-layout-grid__cell--span-2,
    .mdc-layout-grid__cell--span-2-phone {
      width: auto;
      grid-column-end: span 2;
    }
  }
  .mdc-layout-grid__cell--span-3,
  .mdc-layout-grid__cell--span-3-phone {
    width: calc(75% - 16px);
    width: calc(75% - var(--mdc-layout-grid-gutter-phone, 16px));
  }
  @supports (display: grid) {
    .mdc-layout-grid__cell--span-3,
    .mdc-layout-grid__cell--span-3-phone {
      width: auto;
      grid-column-end: span 3;
    }
  }
  .mdc-layout-grid__cell--span-4,
  .mdc-layout-grid__cell--span-4-phone {
    width: calc(100% - 16px);
    width: calc(100% - var(--mdc-layout-grid-gutter-phone, 16px));
  }
  @supports (display: grid) {
    .mdc-layout-grid__cell--span-4,
    .mdc-layout-grid__cell--span-4-phone {
      width: auto;
      grid-column-end: span 4;
    }
  }
  .mdc-layout-grid__cell--span-5,
  .mdc-layout-grid__cell--span-5-phone {
    width: calc(100% - 16px);
    width: calc(100% - var(--mdc-layout-grid-gutter-phone, 16px));
  }
  @supports (display: grid) {
    .mdc-layout-grid__cell--span-5,
    .mdc-layout-grid__cell--span-5-phone {
      width: auto;
      grid-column-end: span 4;
    }
  }
  .mdc-layout-grid__cell--span-6,
  .mdc-layout-grid__cell--span-6-phone {
    width: calc(100% - 16px);
    width: calc(100% - var(--mdc-layout-grid-gutter-phone, 16px));
  }
  @supports (display: grid) {
    .mdc-layout-grid__cell--span-6,
    .mdc-layout-grid__cell--span-6-phone {
      width: auto;
      grid-column-end: span 4;
    }
  }
  .mdc-layout-grid__cell--span-7,
  .mdc-layout-grid__cell--span-7-phone {
    width: calc(100% - 16px);
    width: calc(100% - var(--mdc-layout-grid-gutter-phone, 16px));
  }
  @supports (display: grid) {
    .mdc-layout-grid__cell--span-7,
    .mdc-layout-grid__cell--span-7-phone {
      width: auto;
      grid-column-end: span 4;
    }
  }
  .mdc-layout-grid__cell--span-8,
  .mdc-layout-grid__cell--span-8-phone {
    width: calc(100% - 16px);
    width: calc(100% - var(--mdc-layout-grid-gutter-phone, 16px));
  }
  @supports (display: grid) {
    .mdc-layout-grid__cell--span-8,
    .mdc-layout-grid__cell--span-8-phone {
      width: auto;
      grid-column-end: span 4;
    }
  }
  .mdc-layout-grid__cell--span-9,
  .mdc-layout-grid__cell--span-9-phone {
    width: calc(100% - 16px);
    width: calc(100% - var(--mdc-layout-grid-gutter-phone, 16px));
  }
  @supports (display: grid) {
    .mdc-layout-grid__cell--span-9,
    .mdc-layout-grid__cell--span-9-phone {
      width: auto;
      grid-column-end: span 4;
    }
  }
  .mdc-layout-grid__cell--span-10,
  .mdc-layout-grid__cell--span-10-phone {
    width: calc(100% - 16px);
    width: calc(100% - var(--mdc-layout-grid-gutter-phone, 16px));
  }
  @supports (display: grid) {
    .mdc-layout-grid__cell--span-10,
    .mdc-layout-grid__cell--span-10-phone {
      width: auto;
      grid-column-end: span 4;
    }
  }
  .mdc-layout-grid__cell--span-11,
  .mdc-layout-grid__cell--span-11-phone {
    width: calc(100% - 16px);
    width: calc(100% - var(--mdc-layout-grid-gutter-phone, 16px));
  }
  @supports (display: grid) {
    .mdc-layout-grid__cell--span-11,
    .mdc-layout-grid__cell--span-11-phone {
      width: auto;
      grid-column-end: span 4;
    }
  }
  .mdc-layout-grid__cell--span-12,
  .mdc-layout-grid__cell--span-12-phone {
    width: calc(100% - 16px);
    width: calc(100% - var(--mdc-layout-grid-gutter-phone, 16px));
  }
  @supports (display: grid) {
    .mdc-layout-grid__cell--span-12,
    .mdc-layout-grid__cell--span-12-phone {
      width: auto;
      grid-column-end: span 4;
    }
  }
}
.mdc-layout-grid__cell--order-1 {
  order: 1;
}
.mdc-layout-grid__cell--order-2 {
  order: 2;
}
.mdc-layout-grid__cell--order-3 {
  order: 3;
}
.mdc-layout-grid__cell--order-4 {
  order: 4;
}
.mdc-layout-grid__cell--order-5 {
  order: 5;
}
.mdc-layout-grid__cell--order-6 {
  order: 6;
}
.mdc-layout-grid__cell--order-7 {
  order: 7;
}
.mdc-layout-grid__cell--order-8 {
  order: 8;
}
.mdc-layout-grid__cell--order-9 {
  order: 9;
}
.mdc-layout-grid__cell--order-10 {
  order: 10;
}
.mdc-layout-grid__cell--order-11 {
  order: 11;
}
.mdc-layout-grid__cell--order-12 {
  order: 12;
}
.mdc-layout-grid__cell--align-top {
  align-self: flex-start;
}
@supports (display: grid) {
  .mdc-layout-grid__cell--align-top {
    align-self: start;
  }
}
.mdc-layout-grid__cell--align-middle {
  align-self: center;
}
.mdc-layout-grid__cell--align-bottom {
  align-self: flex-end;
}
@supports (display: grid) {
  .mdc-layout-grid__cell--align-bottom {
    align-self: end;
  }
}
@media (min-width: 840px) {
  .mdc-layout-grid--fixed-column-width {
    width: 1176px;
    width: calc(var(--mdc-layout-grid-column-width-desktop, 72px) * 12 + var(--mdc-layout-grid-gutter-desktop, 24px) * 11 + var(--mdc-layout-grid-margin-desktop, 24px) * 2);
  }
}
@media (min-width: 480px) and (max-width: 839px) {
  .mdc-layout-grid--fixed-column-width {
    width: 720px;
    width: calc(var(--mdc-layout-grid-column-width-tablet, 72px) * 8 + var(--mdc-layout-grid-gutter-tablet, 16px) * 7 + var(--mdc-layout-grid-margin-tablet, 16px) * 2);
  }
}
@media (max-width: 479px) {
  .mdc-layout-grid--fixed-column-width {
    width: 368px;
    width: calc(var(--mdc-layout-grid-column-width-phone, 72px) * 4 + var(--mdc-layout-grid-gutter-phone, 16px) * 3 + var(--mdc-layout-grid-margin-phone, 16px) * 2);
  }
}
.mdc-layout-grid--align-left {
  margin-right: auto;
  margin-left: 0;
}
.mdc-layout-grid--align-right {
  margin-right: 0;
  margin-left: auto;
}

File

css/mdc_grid.css
View source 
  1. :root {

  2.   --mdc-layout-grid-margin-desktop: 24px;

  3.   --mdc-layout-grid-gutter-desktop: 24px;

  4.   --mdc-layout-grid-column-width-desktop: 72px;

  5.   --mdc-layout-grid-margin-tablet: 16px;

  6.   --mdc-layout-grid-gutter-tablet: 16px;

  7.   --mdc-layout-grid-column-width-tablet: 72px;

  8.   --mdc-layout-grid-margin-phone: 16px;

  9.   --mdc-layout-grid-gutter-phone: 16px;

  10.   --mdc-layout-grid-column-width-phone: 72px;

  11. }

  12. @media (min-width: 840px) {

  13.   .mdc-layout-grid {

  14.     box-sizing: border-box;

  15.     margin: 0 auto;

  16.     padding: 24px;

  17.     padding: var(--mdc-layout-grid-margin-desktop, 24px);

  18.   }

  19. }

  20. @media (min-width: 480px) and (max-width: 839px) {

  21.   .mdc-layout-grid {

  22.     box-sizing: border-box;

  23.     margin: 0 auto;

  24.     padding: 16px;

  25.     padding: var(--mdc-layout-grid-margin-tablet, 16px);

  26.   }

  27. }

  28. @media (max-width: 479px) {

  29.   .mdc-layout-grid {

  30.     box-sizing: border-box;

  31.     margin: 0 auto;

  32.     padding: 16px;

  33.     padding: var(--mdc-layout-grid-margin-phone, 16px);

  34.   }

  35. }

  36. @media (min-width: 840px) {

  37.   .mdc-layout-grid__inner {

  38.     display: flex;

  39.     flex-flow: row wrap;

  40.     align-items: stretch;

  41.     margin: -12px;

  42.     margin: calc(var(--mdc-layout-grid-gutter-desktop, 24px) / 2 * -1);

  43.   }

  44.   @supports (display: grid) {

  45.     .mdc-layout-grid__inner {

  46.       display: grid;

  47.       margin: 0;

  48.       grid-gap: 24px;

  49.       grid-gap: var(--mdc-layout-grid-gutter-desktop, 24px);

  50.       grid-template-columns: repeat(12, minmax(0, 1fr));

  51.     }

  52.   }

  53. }

  54. @media (min-width: 480px) and (max-width: 839px) {

  55.   .mdc-layout-grid__inner {

  56.     display: flex;

  57.     flex-flow: row wrap;

  58.     align-items: stretch;

  59.     margin: -8px;

  60.     margin: calc(var(--mdc-layout-grid-gutter-tablet, 16px) / 2 * -1);

  61.   }

  62.   @supports (display: grid) {

  63.     .mdc-layout-grid__inner {

  64.       display: grid;

  65.       margin: 0;

  66.       grid-gap: 16px;

  67.       grid-gap: var(--mdc-layout-grid-gutter-tablet, 16px);

  68.       grid-template-columns: repeat(8, minmax(0, 1fr));

  69.     }

  70.   }

  71. }

  72. @media (max-width: 479px) {

  73.   .mdc-layout-grid__inner {

  74.     display: flex;

  75.     flex-flow: row wrap;

  76.     align-items: stretch;

  77.     margin: -8px;

  78.     margin: calc(var(--mdc-layout-grid-gutter-phone, 16px) / 2 * -1);

  79.   }

  80.   @supports (display: grid) {

  81.     .mdc-layout-grid__inner {

  82.       display: grid;

  83.       margin: 0;

  84.       grid-gap: 16px;

  85.       grid-gap: var(--mdc-layout-grid-gutter-phone, 16px);

  86.       grid-template-columns: repeat(4, minmax(0, 1fr));

  87.     }

  88.   }

  89. }

  90. @media (min-width: 840px) {

  91.   .mdc-layout-grid__cell {

  92.     width: calc(33.33333% - 24px);

  93.     width: calc(33.33333% - var(--mdc-layout-grid-gutter-desktop, 24px));

  94.     box-sizing: border-box;

  95.     margin: 12px;

  96.     margin: calc(var(--mdc-layout-grid-gutter-desktop, 24px) / 2);

  97.   }

  98.   @supports (display: grid) {

  99.     .mdc-layout-grid__cell {

  100.       width: auto;

  101.       grid-column-end: span 4;

  102.     }

  103.   }

  104.   @supports (display: grid) {

  105.     .mdc-layout-grid__cell {

  106.       margin: 0;

  107.     }

  108.   }

  109.   .mdc-layout-grid__cell--span-1,

  110.   .mdc-layout-grid__cell--span-1-desktop {

  111.     width: calc(8.33333% - 24px);

  112.     width: calc(8.33333% - var(--mdc-layout-grid-gutter-desktop, 24px));

  113.   }

  114.   @supports (display: grid) {

  115.     .mdc-layout-grid__cell--span-1,

  116.     .mdc-layout-grid__cell--span-1-desktop {

  117.       width: auto;

  118.       grid-column-end: span 1;

  119.     }

  120.   }

  121.   .mdc-layout-grid__cell--span-2,

  122.   .mdc-layout-grid__cell--span-2-desktop {

  123.     width: calc(16.66667% - 24px);

  124.     width: calc(16.66667% - var(--mdc-layout-grid-gutter-desktop, 24px));

  125.   }

  126.   @supports (display: grid) {

  127.     .mdc-layout-grid__cell--span-2,

  128.     .mdc-layout-grid__cell--span-2-desktop {

  129.       width: auto;

  130.       grid-column-end: span 2;

  131.     }

  132.   }

  133.   .mdc-layout-grid__cell--span-3,

  134.   .mdc-layout-grid__cell--span-3-desktop {

  135.     width: calc(25% - 24px);

  136.     width: calc(25% - var(--mdc-layout-grid-gutter-desktop, 24px));

  137.   }

  138.   @supports (display: grid) {

  139.     .mdc-layout-grid__cell--span-3,

  140.     .mdc-layout-grid__cell--span-3-desktop {

  141.       width: auto;

  142.       grid-column-end: span 3;

  143.     }

  144.   }

  145.   .mdc-layout-grid__cell--span-4,

  146.   .mdc-layout-grid__cell--span-4-desktop {

  147.     width: calc(33.33333% - 24px);

  148.     width: calc(33.33333% - var(--mdc-layout-grid-gutter-desktop, 24px));

  149.   }

  150.   @supports (display: grid) {

  151.     .mdc-layout-grid__cell--span-4,

  152.     .mdc-layout-grid__cell--span-4-desktop {

  153.       width: auto;

  154.       grid-column-end: span 4;

  155.     }

  156.   }

  157.   .mdc-layout-grid__cell--span-5,

  158.   .mdc-layout-grid__cell--span-5-desktop {

  159.     width: calc(41.66667% - 24px);

  160.     width: calc(41.66667% - var(--mdc-layout-grid-gutter-desktop, 24px));

  161.   }

  162.   @supports (display: grid) {

  163.     .mdc-layout-grid__cell--span-5,

  164.     .mdc-layout-grid__cell--span-5-desktop {

  165.       width: auto;

  166.       grid-column-end: span 5;

  167.     }

  168.   }

  169.   .mdc-layout-grid__cell--span-6,

  170.   .mdc-layout-grid__cell--span-6-desktop {

  171.     width: calc(50% - 24px);

  172.     width: calc(50% - var(--mdc-layout-grid-gutter-desktop, 24px));

  173.   }

  174.   @supports (display: grid) {

  175.     .mdc-layout-grid__cell--span-6,

  176.     .mdc-layout-grid__cell--span-6-desktop {

  177.       width: auto;

  178.       grid-column-end: span 6;

  179.     }

  180.   }

  181.   .mdc-layout-grid__cell--span-7,

  182.   .mdc-layout-grid__cell--span-7-desktop {

  183.     width: calc(58.33333% - 24px);

  184.     width: calc(58.33333% - var(--mdc-layout-grid-gutter-desktop, 24px));

  185.   }

  186.   @supports (display: grid) {

  187.     .mdc-layout-grid__cell--span-7,

  188.     .mdc-layout-grid__cell--span-7-desktop {

  189.       width: auto;

  190.       grid-column-end: span 7;

  191.     }

  192.   }

  193.   .mdc-layout-grid__cell--span-8,

  194.   .mdc-layout-grid__cell--span-8-desktop {

  195.     width: calc(66.66667% - 24px);

  196.     width: calc(66.66667% - var(--mdc-layout-grid-gutter-desktop, 24px));

  197.   }

  198.   @supports (display: grid) {

  199.     .mdc-layout-grid__cell--span-8,

  200.     .mdc-layout-grid__cell--span-8-desktop {

  201.       width: auto;

  202.       grid-column-end: span 8;

  203.     }

  204.   }

  205.   .mdc-layout-grid__cell--span-9,

  206.   .mdc-layout-grid__cell--span-9-desktop {

  207.     width: calc(75% - 24px);

  208.     width: calc(75% - var(--mdc-layout-grid-gutter-desktop, 24px));

  209.   }

  210.   @supports (display: grid) {

  211.     .mdc-layout-grid__cell--span-9,

  212.     .mdc-layout-grid__cell--span-9-desktop {

  213.       width: auto;

  214.       grid-column-end: span 9;

  215.     }

  216.   }

  217.   .mdc-layout-grid__cell--span-10,

  218.   .mdc-layout-grid__cell--span-10-desktop {

  219.     width: calc(83.33333% - 24px);

  220.     width: calc(83.33333% - var(--mdc-layout-grid-gutter-desktop, 24px));

  221.   }

  222.   @supports (display: grid) {

  223.     .mdc-layout-grid__cell--span-10,

  224.     .mdc-layout-grid__cell--span-10-desktop {

  225.       width: auto;

  226.       grid-column-end: span 10;

  227.     }

  228.   }

  229.   .mdc-layout-grid__cell--span-11,

  230.   .mdc-layout-grid__cell--span-11-desktop {

  231.     width: calc(91.66667% - 24px);

  232.     width: calc(91.66667% - var(--mdc-layout-grid-gutter-desktop, 24px));

  233.   }

  234.   @supports (display: grid) {

  235.     .mdc-layout-grid__cell--span-11,

  236.     .mdc-layout-grid__cell--span-11-desktop {

  237.       width: auto;

  238.       grid-column-end: span 11;

  239.     }

  240.   }

  241.   .mdc-layout-grid__cell--span-12,

  242.   .mdc-layout-grid__cell--span-12-desktop {

  243.     width: calc(100% - 24px);

  244.     width: calc(100% - var(--mdc-layout-grid-gutter-desktop, 24px));

  245.   }

  246.   @supports (display: grid) {

  247.     .mdc-layout-grid__cell--span-12,

  248.     .mdc-layout-grid__cell--span-12-desktop {

  249.       width: auto;

  250.       grid-column-end: span 12;

  251.     }

  252.   }

  253. }

  254. @media (min-width: 480px) and (max-width: 839px) {

  255.   .mdc-layout-grid__cell {

  256.     width: calc(50% - 16px);

  257.     width: calc(50% - var(--mdc-layout-grid-gutter-tablet, 16px));

  258.     box-sizing: border-box;

  259.     margin: 8px;

  260.     margin: calc(var(--mdc-layout-grid-gutter-tablet, 16px) / 2);

  261.   }

  262.   @supports (display: grid) {

  263.     .mdc-layout-grid__cell {

  264.       width: auto;

  265.       grid-column-end: span 4;

  266.     }

  267.   }

  268.   @supports (display: grid) {

  269.     .mdc-layout-grid__cell {

  270.       margin: 0;

  271.     }

  272.   }

  273.   .mdc-layout-grid__cell--span-1,

  274.   .mdc-layout-grid__cell--span-1-tablet {

  275.     width: calc(12.5% - 16px);

  276.     width: calc(12.5% - var(--mdc-layout-grid-gutter-tablet, 16px));

  277.   }

  278.   @supports (display: grid) {

  279.     .mdc-layout-grid__cell--span-1,

  280.     .mdc-layout-grid__cell--span-1-tablet {

  281.       width: auto;

  282.       grid-column-end: span 1;

  283.     }

  284.   }

  285.   .mdc-layout-grid__cell--span-2,

  286.   .mdc-layout-grid__cell--span-2-tablet {

  287.     width: calc(25% - 16px);

  288.     width: calc(25% - var(--mdc-layout-grid-gutter-tablet, 16px));

  289.   }

  290.   @supports (display: grid) {

  291.     .mdc-layout-grid__cell--span-2,

  292.     .mdc-layout-grid__cell--span-2-tablet {

  293.       width: auto;

  294.       grid-column-end: span 2;

  295.     }

  296.   }

  297.   .mdc-layout-grid__cell--span-3,

  298.   .mdc-layout-grid__cell--span-3-tablet {

  299.     width: calc(37.5% - 16px);

  300.     width: calc(37.5% - var(--mdc-layout-grid-gutter-tablet, 16px));

  301.   }

  302.   @supports (display: grid) {

  303.     .mdc-layout-grid__cell--span-3,

  304.     .mdc-layout-grid__cell--span-3-tablet {

  305.       width: auto;

  306.       grid-column-end: span 3;

  307.     }

  308.   }

  309.   .mdc-layout-grid__cell--span-4,

  310.   .mdc-layout-grid__cell--span-4-tablet {

  311.     width: calc(50% - 16px);

  312.     width: calc(50% - var(--mdc-layout-grid-gutter-tablet, 16px));

  313.   }

  314.   @supports (display: grid) {

  315.     .mdc-layout-grid__cell--span-4,

  316.     .mdc-layout-grid__cell--span-4-tablet {

  317.       width: auto;

  318.       grid-column-end: span 4;

  319.     }

  320.   }

  321.   .mdc-layout-grid__cell--span-5,

  322.   .mdc-layout-grid__cell--span-5-tablet {

  323.     width: calc(62.5% - 16px);

  324.     width: calc(62.5% - var(--mdc-layout-grid-gutter-tablet, 16px));

  325.   }

  326.   @supports (display: grid) {

  327.     .mdc-layout-grid__cell--span-5,

  328.     .mdc-layout-grid__cell--span-5-tablet {

  329.       width: auto;

  330.       grid-column-end: span 5;

  331.     }

  332.   }

  333.   .mdc-layout-grid__cell--span-6,

  334.   .mdc-layout-grid__cell--span-6-tablet {

  335.     width: calc(75% - 16px);

  336.     width: calc(75% - var(--mdc-layout-grid-gutter-tablet, 16px));

  337.   }

  338.   @supports (display: grid) {

  339.     .mdc-layout-grid__cell--span-6,

  340.     .mdc-layout-grid__cell--span-6-tablet {

  341.       width: auto;

  342.       grid-column-end: span 6;

  343.     }

  344.   }

  345.   .mdc-layout-grid__cell--span-7,

  346.   .mdc-layout-grid__cell--span-7-tablet {

  347.     width: calc(87.5% - 16px);

  348.     width: calc(87.5% - var(--mdc-layout-grid-gutter-tablet, 16px));

  349.   }

  350.   @supports (display: grid) {

  351.     .mdc-layout-grid__cell--span-7,

  352.     .mdc-layout-grid__cell--span-7-tablet {

  353.       width: auto;

  354.       grid-column-end: span 7;

  355.     }

  356.   }

  357.   .mdc-layout-grid__cell--span-8,

  358.   .mdc-layout-grid__cell--span-8-tablet {

  359.     width: calc(100% - 16px);

  360.     width: calc(100% - var(--mdc-layout-grid-gutter-tablet, 16px));

  361.   }

  362.   @supports (display: grid) {

  363.     .mdc-layout-grid__cell--span-8,

  364.     .mdc-layout-grid__cell--span-8-tablet {

  365.       width: auto;

  366.       grid-column-end: span 8;

  367.     }

  368.   }

  369.   .mdc-layout-grid__cell--span-9,

  370.   .mdc-layout-grid__cell--span-9-tablet {

  371.     width: calc(100% - 16px);

  372.     width: calc(100% - var(--mdc-layout-grid-gutter-tablet, 16px));

  373.   }

  374.   @supports (display: grid) {

  375.     .mdc-layout-grid__cell--span-9,

  376.     .mdc-layout-grid__cell--span-9-tablet {

  377.       width: auto;

  378.       grid-column-end: span 8;

  379.     }

  380.   }

  381.   .mdc-layout-grid__cell--span-10,

  382.   .mdc-layout-grid__cell--span-10-tablet {

  383.     width: calc(100% - 16px);

  384.     width: calc(100% - var(--mdc-layout-grid-gutter-tablet, 16px));

  385.   }

  386.   @supports (display: grid) {

  387.     .mdc-layout-grid__cell--span-10,

  388.     .mdc-layout-grid__cell--span-10-tablet {

  389.       width: auto;

  390.       grid-column-end: span 8;

  391.     }

  392.   }

  393.   .mdc-layout-grid__cell--span-11,

  394.   .mdc-layout-grid__cell--span-11-tablet {

  395.     width: calc(100% - 16px);

  396.     width: calc(100% - var(--mdc-layout-grid-gutter-tablet, 16px));

  397.   }

  398.   @supports (display: grid) {

  399.     .mdc-layout-grid__cell--span-11,

  400.     .mdc-layout-grid__cell--span-11-tablet {

  401.       width: auto;

  402.       grid-column-end: span 8;

  403.     }

  404.   }

  405.   .mdc-layout-grid__cell--span-12,

  406.   .mdc-layout-grid__cell--span-12-tablet {

  407.     width: calc(100% - 16px);

  408.     width: calc(100% - var(--mdc-layout-grid-gutter-tablet, 16px));

  409.   }

  410.   @supports (display: grid) {

  411.     .mdc-layout-grid__cell--span-12,

  412.     .mdc-layout-grid__cell--span-12-tablet {

  413.       width: auto;

  414.       grid-column-end: span 8;

  415.     }

  416.   }

  417. }

  418. @media (max-width: 479px) {

  419.   .mdc-layout-grid__cell {

  420.     width: calc(100% - 16px);

  421.     width: calc(100% - var(--mdc-layout-grid-gutter-phone, 16px));

  422.     box-sizing: border-box;

  423.     margin: 8px;

  424.     margin: calc(var(--mdc-layout-grid-gutter-phone, 16px) / 2);

  425.   }

  426.   @supports (display: grid) {

  427.     .mdc-layout-grid__cell {

  428.       width: auto;

  429.       grid-column-end: span 4;

  430.     }

  431.   }

  432.   @supports (display: grid) {

  433.     .mdc-layout-grid__cell {

  434.       margin: 0;

  435.     }

  436.   }

  437.   .mdc-layout-grid__cell--span-1,

  438.   .mdc-layout-grid__cell--span-1-phone {

  439.     width: calc(25% - 16px);

  440.     width: calc(25% - var(--mdc-layout-grid-gutter-phone, 16px));

  441.   }

  442.   @supports (display: grid) {

  443.     .mdc-layout-grid__cell--span-1,

  444.     .mdc-layout-grid__cell--span-1-phone {

  445.       width: auto;

  446.       grid-column-end: span 1;

  447.     }

  448.   }

  449.   .mdc-layout-grid__cell--span-2,

  450.   .mdc-layout-grid__cell--span-2-phone {

  451.     width: calc(50% - 16px);

  452.     width: calc(50% - var(--mdc-layout-grid-gutter-phone, 16px));

  453.   }

  454.   @supports (display: grid) {

  455.     .mdc-layout-grid__cell--span-2,

  456.     .mdc-layout-grid__cell--span-2-phone {

  457.       width: auto;

  458.       grid-column-end: span 2;

  459.     }

  460.   }

  461.   .mdc-layout-grid__cell--span-3,

  462.   .mdc-layout-grid__cell--span-3-phone {

  463.     width: calc(75% - 16px);

  464.     width: calc(75% - var(--mdc-layout-grid-gutter-phone, 16px));

  465.   }

  466.   @supports (display: grid) {

  467.     .mdc-layout-grid__cell--span-3,

  468.     .mdc-layout-grid__cell--span-3-phone {

  469.       width: auto;

  470.       grid-column-end: span 3;

  471.     }

  472.   }

  473.   .mdc-layout-grid__cell--span-4,

  474.   .mdc-layout-grid__cell--span-4-phone {

  475.     width: calc(100% - 16px);

  476.     width: calc(100% - var(--mdc-layout-grid-gutter-phone, 16px));

  477.   }

  478.   @supports (display: grid) {

  479.     .mdc-layout-grid__cell--span-4,

  480.     .mdc-layout-grid__cell--span-4-phone {

  481.       width: auto;

  482.       grid-column-end: span 4;

  483.     }

  484.   }

  485.   .mdc-layout-grid__cell--span-5,

  486.   .mdc-layout-grid__cell--span-5-phone {

  487.     width: calc(100% - 16px);

  488.     width: calc(100% - var(--mdc-layout-grid-gutter-phone, 16px));

  489.   }

  490.   @supports (display: grid) {

  491.     .mdc-layout-grid__cell--span-5,

  492.     .mdc-layout-grid__cell--span-5-phone {

  493.       width: auto;

  494.       grid-column-end: span 4;

  495.     }

  496.   }

  497.   .mdc-layout-grid__cell--span-6,

  498.   .mdc-layout-grid__cell--span-6-phone {

  499.     width: calc(100% - 16px);

  500.     width: calc(100% - var(--mdc-layout-grid-gutter-phone, 16px));

  501.   }

  502.   @supports (display: grid) {

  503.     .mdc-layout-grid__cell--span-6,

  504.     .mdc-layout-grid__cell--span-6-phone {

  505.       width: auto;

  506.       grid-column-end: span 4;

  507.     }

  508.   }

  509.   .mdc-layout-grid__cell--span-7,

  510.   .mdc-layout-grid__cell--span-7-phone {

  511.     width: calc(100% - 16px);

  512.     width: calc(100% - var(--mdc-layout-grid-gutter-phone, 16px));

  513.   }

  514.   @supports (display: grid) {

  515.     .mdc-layout-grid__cell--span-7,

  516.     .mdc-layout-grid__cell--span-7-phone {

  517.       width: auto;

  518.       grid-column-end: span 4;

  519.     }

  520.   }

  521.   .mdc-layout-grid__cell--span-8,

  522.   .mdc-layout-grid__cell--span-8-phone {

  523.     width: calc(100% - 16px);

  524.     width: calc(100% - var(--mdc-layout-grid-gutter-phone, 16px));

  525.   }

  526.   @supports (display: grid) {

  527.     .mdc-layout-grid__cell--span-8,

  528.     .mdc-layout-grid__cell--span-8-phone {

  529.       width: auto;

  530.       grid-column-end: span 4;

  531.     }

  532.   }

  533.   .mdc-layout-grid__cell--span-9,

  534.   .mdc-layout-grid__cell--span-9-phone {

  535.     width: calc(100% - 16px);

  536.     width: calc(100% - var(--mdc-layout-grid-gutter-phone, 16px));

  537.   }

  538.   @supports (display: grid) {

  539.     .mdc-layout-grid__cell--span-9,

  540.     .mdc-layout-grid__cell--span-9-phone {

  541.       width: auto;

  542.       grid-column-end: span 4;

  543.     }

  544.   }

  545.   .mdc-layout-grid__cell--span-10,

  546.   .mdc-layout-grid__cell--span-10-phone {

  547.     width: calc(100% - 16px);

  548.     width: calc(100% - var(--mdc-layout-grid-gutter-phone, 16px));

  549.   }

  550.   @supports (display: grid) {

  551.     .mdc-layout-grid__cell--span-10,

  552.     .mdc-layout-grid__cell--span-10-phone {

  553.       width: auto;

  554.       grid-column-end: span 4;

  555.     }

  556.   }

  557.   .mdc-layout-grid__cell--span-11,

  558.   .mdc-layout-grid__cell--span-11-phone {

  559.     width: calc(100% - 16px);

  560.     width: calc(100% - var(--mdc-layout-grid-gutter-phone, 16px));

  561.   }

  562.   @supports (display: grid) {

  563.     .mdc-layout-grid__cell--span-11,

  564.     .mdc-layout-grid__cell--span-11-phone {

  565.       width: auto;

  566.       grid-column-end: span 4;

  567.     }

  568.   }

  569.   .mdc-layout-grid__cell--span-12,

  570.   .mdc-layout-grid__cell--span-12-phone {

  571.     width: calc(100% - 16px);

  572.     width: calc(100% - var(--mdc-layout-grid-gutter-phone, 16px));

  573.   }

  574.   @supports (display: grid) {

  575.     .mdc-layout-grid__cell--span-12,

  576.     .mdc-layout-grid__cell--span-12-phone {

  577.       width: auto;

  578.       grid-column-end: span 4;

  579.     }

  580.   }

  581. }

  582. .mdc-layout-grid__cell--order-1 {

  583.   order: 1;

  584. }

  585. .mdc-layout-grid__cell--order-2 {

  586.   order: 2;

  587. }

  588. .mdc-layout-grid__cell--order-3 {

  589.   order: 3;

  590. }

  591. .mdc-layout-grid__cell--order-4 {

  592.   order: 4;

  593. }

  594. .mdc-layout-grid__cell--order-5 {

  595.   order: 5;

  596. }

  597. .mdc-layout-grid__cell--order-6 {

  598.   order: 6;

  599. }

  600. .mdc-layout-grid__cell--order-7 {

  601.   order: 7;

  602. }

  603. .mdc-layout-grid__cell--order-8 {

  604.   order: 8;

  605. }

  606. .mdc-layout-grid__cell--order-9 {

  607.   order: 9;

  608. }

  609. .mdc-layout-grid__cell--order-10 {

  610.   order: 10;

  611. }

  612. .mdc-layout-grid__cell--order-11 {

  613.   order: 11;

  614. }

  615. .mdc-layout-grid__cell--order-12 {

  616.   order: 12;

  617. }

  618. .mdc-layout-grid__cell--align-top {

  619.   align-self: flex-start;

  620. }

  621. @supports (display: grid) {

  622.   .mdc-layout-grid__cell--align-top {

  623.     align-self: start;

  624.   }

  625. }

  626. .mdc-layout-grid__cell--align-middle {

  627.   align-self: center;

  628. }

  629. .mdc-layout-grid__cell--align-bottom {

  630.   align-self: flex-end;

  631. }

  632. @supports (display: grid) {

  633.   .mdc-layout-grid__cell--align-bottom {

  634.     align-self: end;

  635.   }

  636. }

  637. @media (min-width: 840px) {

  638.   .mdc-layout-grid--fixed-column-width {

  639.     width: 1176px;

  640.     width: calc(var(--mdc-layout-grid-column-width-desktop, 72px) * 12 + var(--mdc-layout-grid-gutter-desktop, 24px) * 11 + var(--mdc-layout-grid-margin-desktop, 24px) * 2);

  641.   }

  642. }

  643. @media (min-width: 480px) and (max-width: 839px) {

  644.   .mdc-layout-grid--fixed-column-width {

  645.     width: 720px;

  646.     width: calc(var(--mdc-layout-grid-column-width-tablet, 72px) * 8 + var(--mdc-layout-grid-gutter-tablet, 16px) * 7 + var(--mdc-layout-grid-margin-tablet, 16px) * 2);

  647.   }

  648. }

  649. @media (max-width: 479px) {

  650.   .mdc-layout-grid--fixed-column-width {

  651.     width: 368px;

  652.     width: calc(var(--mdc-layout-grid-column-width-phone, 72px) * 4 + var(--mdc-layout-grid-gutter-phone, 16px) * 3 + var(--mdc-layout-grid-margin-phone, 16px) * 2);

  653.   }

  654. }

  655. .mdc-layout-grid--align-left {

  656.   margin-right: auto;

  657.   margin-left: 0;

  658. }

  659. .mdc-layout-grid--align-right {

  660.   margin-right: 0;

  661.   margin-left: auto;

  662. }