/* =========================
   CTA Section - Desktop
========================= */
#cta.section {
  height: 100vh;
  display: flex;
  align-items: center;         /* vertical center */
  justify-content: flex-start; /* stick to left side */
  text-align: left;
  color: #fff;
  padding: 0 40px;             /* only right padding now */
  box-sizing: border-box;

  background: 
    linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0)),
    image-set(
      url("../images/satori-bg-desktop.webp") 1x,
      url("../images/satori-bg-desktop@2x.webp") 2x
    );
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

#cta .container {
  max-width: 500px;   /* keeps text readable */
  margin-left: 13%;    /* adjust for green line alignment */
}

#cta .kicker {
  margin: 0 0 1rem 0;
  display: block;
}

/* =========================
   Tablet (<= 1024px)
========================= */
@media (max-width: 1024px) {
  #cta.section {
    padding: 0 30px;
    background-image:
      linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0)),
      url("../images/satori-bg-tablet.webp");
    background-image:
      linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0)),
      -webkit-image-set(
        url("../images/satori-bg-tablet.webp") 1x,
        url("../images/satori-bg-tablet@2x.webp") 2x
      );
    background-image:
      linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0)),
      image-set(
        url("../images/satori-bg-tablet.webp") 1x,
        url("../images/satori-bg-tablet@2x.webp") 2x
      );
  }

  #cta .container {
    margin-left: 8%; /* a little more center on tablet */
    max-width: 450px;
  }
}

/* =========================
   Mobile (<= 600px)
========================= */
@media (max-width: 600px) {
  #cta.section {
    padding: 20px; /* equal padding */
    background-image:
      linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0)),
      url("../images/satori-bg-mobile.webp");
    background-image:
      linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0)),
      -webkit-image-set(
        url("../images/satori-bg-mobile.webp") 1x,
        url("../images/satori-bg-mobile@2x.webp") 2x
      );
    background-image:
      linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0)),
      image-set(
        url("../images/satori-bg-mobile.webp") 1x,
        url("../images/satori-bg-mobile@2x.webp") 2x
      );
  }

  #cta .container {
    margin-left: 0;       /* full left on mobile */
    max-width: 100%;      /* take full width */
  }
}