/*
 * @file
 * Provides the layout styles for three-column layout section.
 */

.layout--three-column {
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media screen and (min-width: 640px) {
  .layout--three-column{
    grid-template-columns: repeat(2, calc(50% - 0.75rem));
    grid-column: span 2;
  }
  .layout--three-column .layout__region--third{
    grid-column: 1 / span 2;
    width: 100%;
    justify-self: center;
  }
  .layout--three-column--25-25-50,
  .layout--three-column--50-25-25,
  .layout--three-column--25-50-25  {
    grid-template-columns: repeat(2, calc(50% - 0.75rem));
    grid-template-areas: "a b" "c c";
  }
  .layout--three-column--50-25-25 {
    grid-template-areas: "a a" "b c";
  }
  .layout--three-column--25-25-50 .layout__region--first,
  .layout--three-column--25-50-25 .layout__region--first,
  .layout--three-column--50-25-25 .layout__region--first {
    grid-area: a;
  }
  .layout--three-column--25-25-50 .layout__region--second,
  .layout--three-column--25-50-25 .layout__region--third,
  .layout--three-column--50-25-25 .layout__region--second {
    grid-area: b;
  }
  .layout--three-column--25-25-50 .layout__region--third,
  .layout--three-column--25-50-25 .layout__region--second,
  .layout--three-column--50-25-25 .layout__region--third {
    grid-area: c;
  }
}
@media screen and (min-width: 900px) {
  .layout--three-column{
    grid-template-columns: repeat(3, calc(33.333% - 1rem));
  }
  .layout--three-column .layout__region--third{
    grid-column: initial;
    width: initial;
    justify-self: initial;
  }
  .layout--three-column--25-25-50 {
    grid-template-columns: calc(25% - 1rem) calc(25% - 1rem) calc(50% - 1rem);
    grid-template-areas: "a b c";
  }
  .layout--three-column--50-25-25 {
    grid-template-columns: calc(50% - 1rem) calc(25% - 1rem) calc(25% - 1rem);
    grid-template-areas: "a b c";
  }
  .layout--three-column--25-50-25 {
    grid-template-columns: calc(25% - 1rem) calc(50% - 1rem) calc(25% - 1rem);
    grid-template-areas: "a b c";
  }
  .layout--three-column--25-50-25 .layout__region--third {
    grid-area: c;
  }
  .layout--three-column--25-50-25 .layout__region--second {
    grid-area: b;
  }
}
@media screen and (min-width: 1300px) {
  .layout--three-column{
    gap: 2rem;
    grid-template-columns: repeat(3, calc(33.333% - 1.3333rem));
  }
  .layout--three-column--25-25-50 {
    grid-template-columns: calc(25% - 1.3333rem) calc(25% - 1.3333rem) calc(50% - 1.3333rem);
  }
  .layout--three-column--50-25-25 {
    grid-template-columns: calc(50% - 1.3333rem) calc(25% - 1.3333rem) calc(25% - 1.3333rem);
  }
  .layout--three-column--25-50-25 {
    grid-template-columns: calc(25% - 1.3333rem) calc(50% - 1.3333rem) calc(25% - 1.3333rem);
  }
}