.wrapper {
    height:100vh;
    display: grid;
    grid-template-rows: 40% repeat(2, 1fr) 15% 1fr;
    grid-template-columns: 10% 1fr 10%;
    grid-template-areas: 
        ". content ."
        ". header ."
        ". footer ."
        ". . . "
        ". aside ."
    ;
}

.logo {
  width:100%;
  height: auto;
}

header {
    /*background:tomato;*/
    grid-area: header;
}

aside {
  /*background:tomato;*/
  grid-area: aside;
}

article {
    /*background:gold;*/
    grid-area: content;
    display: flex;
    justify-content: center;
    align-items: center;
}

footer {
    /*background:lightblue;*/
    grid-area: footer;
}

footer, header {
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    flex-direction: column;
}

aside {
  display: flex;
  text-align: center;
  justify-content: center;
  /*align-items: center; */
}

footer > a, header > a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50%;
    font-size:27px;
    /*background-color: grey;*/
    font-weight: bold;
    text-decoration: none;
    color:#181716; 
    letter-spacing: -0.03em; 
}


/* Pattern styles */
.container-logos {
  display: block;
  text-align:center;
}

.left-half {
  /*background-color: #ff9e2c;*/
  flex: 1;
  padding: 1rem;

}

.right-half {
  /*background-color: #b6701e;*/
  flex: 2;
  padding: 1rem;

}

.right-half img { max-width:100%;}

.strikeout {
  position: relative;
}
.strikeout::after {
  border-bottom: 0.2em solid rgba(177, 246, 217, 0.8);
  content: "";
  left: 0;
  line-height: 1em;
  margin-top: calc(0.2em / 2 * -1);
  position: absolute;
  right: 0;
  top: 50%;
}


@media screen and (min-width: 44.001em) {

    .wrapper {
        grid-template-rows: 1fr 40% 1fr 6%;
        grid-template-columns: 15% 1fr 1fr 15%;
        grid-template-areas: 
            ". header header ."
            ". content content ."
            ". footer footer ."
            ". aside aside ."
        ;
    }

    .container-logos {
    display: flex;
    text-align:left;
    }

  article {
      display: flex;
      justify-content: center;
      align-items: center;
  }

  header, footer {
      display: flex;
      justify-content: space-between;
      flex-direction: row;
      /*align-items:end;
      align-items:start;*/
  }

  footer > a, header > a {
    /*flex-grow: 0;*/
    width: auto;
    height: auto;
    font-size:45px;
    font-weight: bold;
    text-decoration: none;
    color:#181716; 
    letter-spacing: -0.03em; 
  }

}

ul.hori {
  width: 100%; 
  display: flex;
  justify-content: space-between;
}

ul.hori li{
  display: inline;
}

figure {
  display: flex;
  flex-direction: column;
  margin: 0;
  position: relative;
}

figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: left;
  font-size: 12px;
  line-height: 1.5;
  color: #fff;
  padding: 12px;
  /*adjust this to control how far it should be from egde*/
}

a img {
  transition: all .8s ease-in-out; 
}
a img:hover {
  filter: grayscale(100%);
}