:root {
  --banner-img:180px;
  --banner-img-transform: translate(-50%, 0);
  --banner-content-start--img-left: 50%;
}

.banner {
  flex-direction: column;
}
.banner .content-start {
  position: relative;
  background-color: #55dd55;
}
.banner .content-start img {
  max-width: var(--banner-img);
  position: absolute;
  top: 50%;
  left: var(--banner-content-start--img-left);
  transform: var(--banner-img-transform);
}
@media screen and (min-width: 649px) {
  :root {
    --banner-img:270px;
    --banner-content-start--img-left: 18%;
    --banner-img-transform: translate(0, -50%) ;
  }
  .banner {
    flex-direction: row;
  }
}
@media screen and (min-width: 719px) {
  :root {
    --banner-content-start--img-left: 24%;
  }
}
@media screen and (min-width: 839px) {
  :root {
    --banner-content-start--img-left: 28%;
  }
}
@media screen and (min-width: 959px) {
  :root {
    --banner-content-start--img-left: 38%;
  }
}
@media screen and (min-width: 1024px) {
  :root {
    --banner-content-start--img-left: 42%;
  }
}
@media screen and (min-width: 1240px) {
  :root {
    --banner-content-start--img-left: 50%;
    --banner-img:320px;
  }
  .banner {
    flex-direction: row;
  }
  .banner .content-start {
    max-width: 320px;
  }
}

/*# sourceMappingURL=home.css.map */