/**
 * @file
 * Is the responsive layout composition.
 *
 * Is intented to set basic layout rules to regions and global blocks.
 * Also add grid common rules.
 */



/**
 * Layout content
 */


.layout {
  padding: 0 1.5rem;
}
.layout--onecol {
  padding: 0;
}
.grid-row .layout {
  padding: 0;
}
.layout-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.main__content {
  max-width: 1920px;
  margin: 0 auto;
  width: 100%;
}
.layout__region--content {
  display: flex;
  flex-direction: column;
}

/**
 * Grid row
 */

.grid-row {
	padding: 0;
  width: calc(100% - 3rem);
  margin: 0 auto;
}
@media all and (min-width: 750px) {
  .grid-row {
    width: 87%;
  }
}
@media all and (min-width: 1300px) {
  .grid-row--13{
    max-width: 1560px;
  }
  .grid-row--12{
    max-width: 1440px;
  }
  .grid-row--10{
    max-width: 1180px;
  }
  .grid-row--8{
    max-width: 940px;
  }
  .grid-row--6{
    max-width: 700px;
  }
}


/**
 * Layout TwoCol
 */

 .layout--twocol {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
 }

 .section--reverse {
  .layout--twocol {
    display: grid;
    grid-template-areas : 'b'
                          'a';
  }

  .layout__region--first {
    grid-area: a;
  }
  .layout__region--second {
    grid-area: b;
  }
}


@media screen and (min-width: 900px) {
  .section--reverse {
    .layout--twocol {
      grid-template-areas : 'a b';
    }

    .layout__region--first {
      grid-area: a;
    }
    .layout__region--second {
      grid-area: b;
    }
  }

  .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-60-40,
  .layout--twocol-25-75 {
    display: grid;
    gap: 1.5rem;
  }
  .layout--twocol-60-40 {
    grid-template-columns: calc(60% - 0.75rem) calc(40% - 0.75rem);
  }
  .layout--twocol-75-25 {
    grid-template-columns: calc(75% - 0.75rem) calc(25% - 0.75rem);
  }
  .layout--twocol-25-75 {
    grid-template-columns: calc(25% - 0.75rem) calc(75% - 0.75rem);
  }
}
@media screen and (min-width: 1300px) {
  .layout--twocol,
  .layout--twocol-60-40,
  .layout--twocol-75-25,
  .layout--twocol-25-75 {
    gap: 2rem;
  }
  .layout--twocol {
    grid-template-columns: repeat(2, calc(50% - 1rem));
    gap: 2rem;
  }
  .layout--twocol-60-40 {
    grid-template-columns: calc(60% - 1rem) calc(40% - 1rem);
  }
  .layout--twocol-75-25 {
    grid-template-columns: calc(75% - 1rem) calc(25% - 1rem);
  }
  .layout--twocol-25-75 {
    grid-template-columns: calc(75% - 1rem) calc(25% - 1rem);
  }
}



/**
 * Layout ThreeCol
 */

@media screen and (min-width: 550px) {
  .layout--threecol_25_25_50,
  .layout--threecol_50_25_25,
  .layout--threecol-40-30-30,
  .layout--threecol-25-50-25-kw  {
    display: grid;
    grid-template-columns: repeat(2, calc(50% - 0.75rem));
    grid-template-areas: "a b" "c c";
    gap: 1.5rem;
  }
  .layout--threecol-40-30-30,
  .layout--threecol_50_25_25 {
    grid-template-areas: "a a" "b c";
  }
  .layout--threecol_25_25_50 .layout__region--first,
  .layout--threecol-25-50-25-kw .layout__region--first,
  .layout--threecol-40-30-30 .layout__region--first,
  .layout--threecol_50_25_25 .layout__region--first {
    grid-area: a;
  }
  .layout--threecol_25_25_50 .layout__region--second,
  .layout--threecol-25-50-25-kw .layout__region--third,
  .layout--threecol-40-30-30 .layout__region--second,
  .layout--threecol_50_25_25 .layout__region--second {
    grid-area: b;
  }
  .layout--threecol_25_25_50 .layout__region--third,
  .layout--threecol-25-50-25-kw .layout__region--second,
  .layout--threecol-40-30-30 .layout__region--third,
  .layout--threecol_50_25_25 .layout__region--third {
    grid-area: c;
  }
}
@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: 1000px) {
  .layout--threecol_25_25_50 {
    grid-template-columns: calc(25% - 1.5rem) calc(25% - 1.5rem) 50%;
    grid-template-areas: "a b c";
  }
  .layout--threecol-40-30-30 {
    grid-template-columns: 40% calc(30% - 1.5rem) calc(30% - 1.5rem);
    grid-template-areas: "a b c";
  }
  .layout--threecol_50_25_25 {
    grid-template-columns: 50% calc(25% - 1.5rem) calc(25% - 1.5rem);
    grid-template-areas: "a b c";
  }
  .layout--threecol-25-50-25-kw {
    grid-template-columns: calc(25% - 1.5rem) 50% calc(25% - 1.5rem);
    grid-template-areas: "a b c";
  }
  .layout--threecol-25-50-25-kw .layout__region--third {
    grid-area: c;
  }
  .layout--threecol-25-50-25-kw .layout__region--second {
    grid-area: b;
  }
}
@media screen and (min-width: 1300px) {
  .layout--threecol,
  .layout--threecol_25_25_50,
  .layout--threecol_50_25_25,
  .layout--threecol-40-30-30,
  .layout--threecol-25-50-25-kw {
    gap: 2rem;
  }
  .layout--threecol{
    grid-template-columns: calc(33.333% - 1.3333rem) calc(33.333% - 1.3333rem) calc(33.333% - 1.3333rem);
  }
  .layout--threecol_25_25_50 {
    grid-template-columns: calc(25% - 2rem) calc(25% - 2rem) 50%;
  }
  .layout--threecol-40-30-30 {
    grid-template-columns: 40% calc(30% - 2rem) calc(30% - 2rem);
  }
  .layout--threecol_50_25_25 {
    grid-template-columns: 50% calc(25% - 2rem) calc(25% - 2rem);
  }
  .layout--threecol-25-50-25-kw {
    grid-template-columns: calc(25% - 2rem) 50% calc(25% - 2rem);
  }
}

/**
 * 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;
  }
  .layout--fourcol {
    grid-template-columns: repeat(4, calc(25% - 1.5rem));
  }
}