.block-content-side-image {
  background-color: var(--middleColor);
  color: #fff;
}
.block-content-side-image .title {
  color: #fff;
  font-size: clamp(28px, 3vw, 44px);
}
.block-content-side-image .highlight {
  color: var(--accentColor);
}
.block-content-side-image .top-title {
  text-align: center;
}
.block-content-side-image .content {
  padding: 50px 25px;
}
.block-content-side-image .content a:not(.btn) {
  color: var(--accentColor);
}
.block-content-side-image .content a:not(.btn):hover {
  color: var(--highlightColor);
}
.block-content-side-image .image picture {
  display: block;
}
.block-content-side-image .image picture img {
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 768px) {
  .block-content-side-image .inner {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin: 0;
  }
  .block-content-side-image .content {
    padding: 80px 100px;
    flex: 1;
  }
  .block-content-side-image .image {
    flex: 1;
    position: relative;
  }
  .block-content-side-image .image picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .block-content-side-image .image picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }
  .block-content-side-image.invert .content {
    order: 2;
  }
  .block-content-side-image.invert .image {
    order: 1;
  }
}
@media (min-width: 1280px) {
  .block-content-side-image .content {
    padding: 100px 134px;
  }
}
@media (min-width: 1440px) {
  .block-content-side-image .content {
    flex: 0 0 50%;
    padding: 0 100px;
  }
  .block-content-side-image .image {
    flex: 0 0 50%;
  }
  .block-content-side-image.invert .content {
    padding: 100px 140px;
  }
}