.banner {
  margin-top: 60px;
  margin-bottom: 0px;
  grid-template-areas:
    "banner-content"
    "banner-img-fullwidth";
}

@media (min-width: 1000px) {
  .banner {
    grid-template-areas:
      "banner-img-fullwidth"
      "banner-content";
    margin-bottom: 20px;
  }
}

.banner__homepage {
  margin-top: 120px;
  margin-bottom: 0px;
  grid-template-areas:
    "banner-content";
}


@media (min-width: 1000px) {
  .banner__homepage {
    grid-template-columns: 5fr 1fr 8fr;
    grid-template-areas:
      "banner-img__portrait . banner-content";
    margin-bottom: 20px;
  }
}

@media (max-width: 759px) {
  .banner__homepage {
    margin-top: 150px;
  }
}

.banner-content {
  display: flex;
  flex-direction: column;
  grid-area: banner-content;
}

h4.banner-subheader {
  text-transform: uppercase;
  color: #ba0d2e;
}

p.banner-text {
  font-weight: 500;
  margin-top: 20px;
  font-size: 1.2rem;
  line-height: 2rem;
}

.banner-img {
  height: 100% !important;
}

@media (min-width: 1000px) {
  .banner-img {
    height: auto !important;
    margin-top: 0;
  }
}

img.banner-img-fullwidth {
  width: 100%;
  height: 400px;
  object-fit: cover;
  margin-bottom: 30px;
  grid-area: banner-img-fullwidth;
}

img.banner-img__portrait {
  display: none;
}

@media (min-width: 1000px) {
  img.banner-img__portrait {
    display: inline-block;
    height: 100%;
    width: 100%;
    object-fit: cover;
    grid-area: banner-img__portrait;
  }
}