main.homepage {
  /* overwrite width settings for main styles */
  max-width: 100%;
  padding: 0px 0px;
  margin-top: 0px;

  section.headline {
    min-height: 550px;

    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: cover;

    padding: 8px;
    max-width: 1600px;
    margin: auto;

    /* large screens - apply white gradient to horizontal edges of background */
    @media (width >= 1600px) {
      background-image: linear-gradient(to right, #ffffff, transparent 10%, transparent 90%, #ffffff), url("/images/pos_laptop_shoes_cr_1800_90.webp");
      min-height: 850px;
    }

    /* medium screens - linear minimum height adjustments */
    @media (1600px > width >= 800px) {
      background-image: url("/images/pos_laptop_shoes_cr_1800_90.webp");
      min-height: calc(0.428 * 100vw + 164px);
    }

    /* small screens - static height*/
    @media (800px > width >= 550px) {
      background-image: url("/images/pos_laptop_shoes_cr_1800_90.webp");
      min-height: 650px;
    }

    /* smaller screens - use cropped background image, shrink image to fit */
    @media (width < 550px) {
      background-image: url("/images/pos_laptop_shoes_scr_1082_90.webp");
      background-size: contain;
      min-height: 650px;
    }

    div.headline-content {
      /*horizontally center the div */
      margin: auto;
      max-width: 800px;
      color: white;
      background-color: rgba(38, 35, 92, 0.85);
      border-radius: 5px;
      padding: 5px 20px;
      line-height: 1.5;
    }

    h1 {
      margin-top: 5px;
      img {
        vertical-align: text-bottom;
      }
    }
  }

  section.three-column-content {
    align-items: center;
    /* give the main section an 8px horizontal "margin" (can't do this with margin becuase it's being used for centring) */
    padding: 0px 8px;
    max-width: min(1200px, 100% - 16px);
    /* max-width: 1200px; */
    margin: 16px auto;

    display: flex;
    flex-wrap: wrap;
    flex-basis: 33%;
    justify-content: space-around;
    align-items: flex-start;
    div {
      max-width: 300px;
    }

    img {
      flex: 1 1 33%;
      max-width: min(300px, 100%);
      margin: auto;
      display: block;
      padding: 1em 0.5em;
    }
  }
}