body {
  background-color: var(--bcft);
  display: flex;
  flex-direction: column;
}

header,
section,
footer {
  min-width: 100vw;
}

header {
  order: 2;
}

article {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  min-width: 50vw;
  min-height: 50vw;
  max-height: 40rem;
  max-width: 40rem;
}

h3 {
  font-size: 1.875rem;
  line-height: 1.2;
  font-weight: 500;
}

article h3 {
  margin: 0 0 2.375rem;
}

article p {
  margin: 0 0 1.75rem;
}

.pic {
  display: grid;
  place-content: center;
}

.pic > svg {
  display: block;
  width: inherit;
  height: auto;
  fill: currentColor;
  stroke: none;
  stroke-width: 0;
}

.pic.logo {
  width: 31.25vw;
  max-width: 25rem;
  height: auto;
  color: var(--bc);
  margin: 0 15% 0 0;
}

article.sq {
  display: grid;
  place-content: center;
}

article.img {
  background-image: var(--bimg);
  background-color: var(--bimc);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}


article.a12 {
  background-color: var(--bc01);
  background-image: url(/assets/bg-12.jpg?t=347123471234);
}

article.a21 {
  background-color: var(--bc01);
  background-image: url(/assets/bg-21.jpg?t=347123471234);
}


article.a11 {
  background-color: var(--bc11);
}


article.a22 {
  background-color: var(--bc22);
  justify-content: flex-start;
  align-items: start;
}

article.a22 h3 {
  margin-top: 6.875rem
}

article.a22 h3,
article.a22 p {
  margin-left: 11rem;
  width: auto;
  max-width: 18rem;
}

article.a3 {
  background-color: var(--bc);
  justify-content: center;
  align-items:  center;
  min-height: unset;
  padding: 5.8vw 0; /*4.625rem 0;*/
  width: 100%;
  max-width: 100vw;
  text-align: center;
}

article.a3 h3,
article.a3 h4,
article.a3 p {
  max-width: 40rem;
}

article.a3 span.xl {
  display: block;
}


header,
footer {
  font-family: "myriad-pro", sans-serif;
  font-weight: 300;
  font-style: normal;
}


article.a4 {
  font-family: "myriad-pro", sans-serif;
  font-style: normal;
  min-height: unset;
  background-color: var(--bcft);
  color: var(--bc);
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2.85rem 0;
  width: 100%;
  max-width: 100vw;
}

article.a4 h1 {
  font-size: 1.25rem;
  font-weight: 400;
  margin: 0 0 1.5rem;
}

article.a4 h2 {
  font-size: 1rem;
  font-weight: 300;
  margin: 0;
}


@media (min-width: 110px) {
  .pic.logo {
    margin: 0 10% 0 0;
  }

  article.a22 h3 {
    margin-top: 8%;
  }

  article.a22 h3,
  article.a22 p {
    margin-left: 10%;
  }
}

@media (max-width: 500px) {
  header, footer, section {
    flex-wrap: wrap;
    flex-direction: column;
  }

  article {
    width: 100vw;
    max-width: unset;
    max-height: unset;
    min-width: unset;
    min-height: 6.25rem;
    padding: 2rem;
  }


  article h3 {
    margin: 0 0 1.875rem;
  }

  article p {
    margin: 0 0 1.25rem;
  }

  article.a11 {
    align-items: start;
    justify-content: flex-start;
    padding: 1rem 2rem;
  }

  .pic {
    place-content: start;
  }

  .pic.logo {
    width: auto;
    max-width: 70vw;
    height: 6rem;
    margin: 0;
  }

  .pic > svg {
    height: 6rem;
  }

  article.img {
    height: 10rem;
    max-height: 10rem;
    min-height: 10rem;
    padding: 0;
  }

  article.a12 {
    height: 10rem;
    background-image: url(/assets/bg-21.jpg?t=347123471234);
  }

  article.a21 {
    background-image: url(/assets/bg-12.jpg?t=347123471234);
    order: 2;
  }

  article.a22 {
/*    padding: 1rem;*/
    text-align: left;
    justify-content: flex-start;
    align-items: start;
  }

  article.a22 h3 {
    margin-top: 0
  }

  article.a22 h3,
  article.a22 p {
    margin-left: 0;
    width:100%;
    text-align: left;
  }

  article.a22 p:last-child {
    margin: 0;
  }

  article.a3 {
    padding: 2rem;
    text-align: left;
    justify-content: flex-start;
    align-items: start;
  }

  article.a3 span.xl {
    display: inline;
  }

  article.a3 span.xs {
/*    display: block;*/
  }

  article.a4 {
    padding: 2rem;
  }

  article.a4 h1 {
    margin: 0 0 1rem;
  }
}

@media (max-width: 400px) {

  .pic.logo {
    width: auto;
    height: 5rem;
    margin: 0;
  }

  .pic > svg {
    height: 5rem;
  }

}