/*
 * Layout Custom CSS
 *
 */

.layout {
  padding: 0 1.5rem;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 100%;
}
.layout--onecol {
  padding: 0;
}
.grid-row .layout {
  padding: 0;
}

/**
 * Layout TwoCol
 */


@media screen and (min-width: 900px) {
  .layout--twocol {
    display: grid;
    grid-template-columns: repeat(2, calc(50% - 0.75rem));
    gap: 1.5rem;
  }
}
@media screen and (min-width: 1000px) {
  .layout--twocol-75-25,
  .layout--twocol-25-75 {
    display: grid;
    gap: 1.5rem;
  }
  .layout--twocol-75-25 {
    grid-template-columns: calc(75% - 0.75rem) calc(25% - 0.75rem);
  }
  .layout--twocol-25-75 {
    grid-template-columns: calc(75% - 0.75rem) calc(25% - 0.75rem);
  }
}
@media screen and (min-width: 1300px) {
  .layout--twocol,
  .layout--twocol-75-25,
  .layout--twocol-25-75 {
    gap: 2rem;
  }
  .layout--twocol {
    grid-template-columns: repeat(2, calc(50% - 1rem));
  }
  .layout--twocol-75-25 {
    grid-template-columns: calc(75% - 1rem) calc(25% - 1rem);
  }
  .layout--twocol-25-75 {
    grid-template-columns: calc(25% - 1rem) calc(75% - 1rem);
  }
}



/**
 * Layout ThreeCol
 */


@media screen and (min-width: 640px) {
  .layout--threecol{
    display: grid;
    grid-template-columns: repeat(2, calc(50% - 0.75rem));
    gap: 1.5rem;
    grid-column: span 2;
  }
  .layout--threecol .layout__region--third{
    grid-column: 1 / span 2;
    width: calc(50% - 0.75rem);
    justify-self: center;
  }
}
@media screen and (min-width: 900px) {
  .layout--threecol{
    grid-template-columns: calc(33.333% - 1rem) calc(33.333% - 1rem) calc(33.333% - 1rem);
  }
  .layout--threecol .layout__region--third{
    grid-column: initial;
    width: initial;
    justify-self: initial;
  }
}

@media screen and (min-width: 1300px) {
  .layout--threecol {
    gap: 2rem;
    grid-template-columns: calc(33.333% - 1.3333rem) calc(33.333% - 1.3333rem) calc(33.333% - 1.3333rem);
  }
}

/**
 * Layout FourCol
 */

@media screen and (min-width: 500px) {
  .layout--fourcol {
    display: grid;
    grid-template-columns: repeat(2, calc(50% - 0.75rem));
    gap: 1.5rem;
  }
}
@media screen and (min-width: 1000px) {
  .layout--fourcol {
    grid-template-columns: repeat(4, calc(25% - 1.125rem));
  }
}
@media screen and (min-width: 1300px) {
  .layout--fourcol {
    gap: 2rem;
    grid-template-columns: repeat(4, calc(25% - 1.5rem));
  }
}

/**
 * Layout FiveCol
 */

.layout--fivecol {
  padding: 0 1.5rem;
}
.grid-row .layout--fivecol {
  padding: 0;
}
@media screen and (min-width: 500px) {
  .layout--fivecol {
    display: grid;
    grid-template-columns: repeat(2, calc(50% - 0.9125rem));
    gap: 1.875rem;
    grid-column: span 2;
  }
  .layout--fivecol .layout__region--fifth{
    grid-column: 1 / span 2;
    width: calc(50% - 0.9125rem);
    justify-self: center;
  }
}
@media screen and (min-width: 1000px) {
  .layout--fivecol {
    grid-template-columns: repeat(5, calc(20% - 1.5rem));
  }
  .layout--fivecol .layout__region--fifth{
    grid-column: initial;
    width: initial;
    justify-self: initial;
  }
}