.homepage-slider {
  --content-padding: 20px;
}
.homepage-slider .slider {
  --pagination-color: var(--color-primary);
  padding-left: 0;
  padding-right: 0;
}
.homepage-slider .slider__wrap {
  max-width: none;
}
.homepage-slider .slider__pagination {
  background: white;
}

.homepage-slider__slide {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-align: stretch;
      align-items: stretch;
}

.homepage-slider__col[rel=content], .homepage-slider__col[rel=image] {
  width: 100%;
}
.homepage-slider__col[rel=content] {
  background: rgb(var(--color-light));
  -ms-flex-order: 1;
      order: 1;
  padding: var(--content-padding);
  text-align: center;
}
.homepage-slider__col[rel=content] .button {
  margin-top: 30px;
}
.homepage-slider__col[rel=image] {
  -ms-flex-order: 0;
      order: 0;
}
.homepage-slider__col[rel=image] img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

@media (min-width: 992px) {
  .homepage-slider {
    --content-padding: 40px;
    --accent-width: 30px;
    --image-offset: 20vw;
    --content-offset: 5vw;
  }
  .homepage-slider .slider__pagination {
    background: transparent;
  }
  .homepage-slider__col[rel=content] {
    border-radius: 0 5vw 0 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-order: 0;
        order: 0;
    padding-left: calc(40px + var(--accent-width));
    position: relative;
    text-align: left;
    width: calc(50% - var(--content-offset));
    margin-bottom: 5vw;
    margin-left: 5vw;
    margin-top: var(--content-offset);
  }
  .homepage-slider__col[rel=content] .button {
    margin-top: 50px;
    -ms-flex-item-align: start;
        align-self: start;
  }
  .homepage-slider__col[rel=content]:before {
    background-image: linear-gradient(to right, rgb(var(--color-primary)) 0%, rgb(var(--color-primary)) 33%, rgb(var(--color-light)) 33%, rgb(var(--color-light)) 50%, rgb(var(--color-accent)) 50%, rgb(var(--color-accent)) 100%);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: var(--accent-width);
  }
  .homepage-slider__col[rel=image] {
    -ms-flex-order: 1;
        order: 1;
    width: calc(50% + var(--image-offset));
    margin-left: calc(var(--image-offset) * -1);
  }
  .homepage-slider__col[rel=image] img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
  }
}