:root {
  --sdc-image-banner-content-max-width: 1440px;
  --sdc-image-banner-horizontal-padding: 24px;
  --sdc-image-banner-vertical-padding: 24px;
  --sdc-image-banner-font-size: 20px;
  --sdc-image-banner-heading-size: 50px;
  --sdc-image-banner-letter-spacing: 1px;
  --sdc-image-banner-line-height: 1.5;
  --sdc-image-banner-background-color: #000;
  --sdc-image-banner-text-color: #fff;
  --sdc-image-banner-component-spacing: 40px;
  --sdc-image-banner-position-top: 50px;
  --sdc-image-banner-position-bottom-mobile: 100px;
  --sdc-image-banner-link-text-color: #fff;
  --sdc-image-banner-link-hover-color: #eee;
  --sdc-image-banner-overlay-width: 60%;
  --sdc-image-banner-mobile-spacing: 0;
}

.sdc-image-banner-wrapper-container {
  position: relative;
  max-width: var(--sdc-image-banner-content-max-width);
  margin: 0 auto;
  display: block;
  padding-inline: 0;
}

.sdc-image-banner-wrapper {
  position: relative;
  max-width: var(--sdc-image-banner-content-max-width);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  padding-inline: 0;
}

.sdc-image-banner-image {
  width: 100%;
  position: static;
}

.sdc-image-banner-content {
  margin-top: calc(var(--sdc-image-banner-position-bottom-mobile) * -2);
  width: calc(var(--sdc-image-banner-overlay-width) - var(--sdc-image-banner-mobile-spacing));
  margin-left: var(--sdc-image-banner-mobile-spacing);
  z-index: 1;
}

@media screen and (width >= 480px) {
  .sdc-image-banner-content {
    width: 80%;
    --sdc-slope-max-width: calc(min(100vw, var(--content-width)) * 0.8);
    margin-top: calc(-2.5 * (100% /3 - var(--sdc-image-banner-position-top)));
    margin-left: var(--sdc-image-banner-mobile-spacing);
    z-index: 1;
  }
}

@media screen and (width >= 768px) {
  .sdc-image-banner-content {
    margin-top: calc(-1 * (100% /3 - var(--sdc-image-banner-position-top)));
    width: 58%;
  }
}

.sdc-image-banner {
  display: block;
  padding: var(--sdc-image-banner-vertical-padding) var(--sdc-image-banner-horizontal-padding);
  font-size: var(--sdc-image-banner-font-size);
  font-weight: 500;
  letter-spacing: var(--sdc-image-banner-letter-spacing);
  line-height: var(--sdc-image-banner-line-height);
  background-color: var(--sdc-image-banner-background-color);
  color: var(--sdc-image-banner-text-color);
  --sdc-link-text-container-max-width: auto;
}

.sdc-image-banner h2 {
  font-size: var(--sdc-image-banner-heading-size);
  margin: 0;
}

.sdc-image-banner .sdc-link-button-container {
  padding: 1rem 0;
}

.sdc-image-banner a, .sdc-image-banner a:link {
  color: var(--sdc-image-banner-link-text-color);
}

.sdc-image-banner .sdc-image-banner-link a:hover {
  font-weight: 700;
}

.sdc-image-banner a:visited {
  color: var(--sdc-image-banner-link-visited-text-color);
}

.sdc-image-banner-link a {
  display: flex;
  flex-direction: row;
}

.sdc-image-banner-link span {
  display: flex;
  align-items: center;
}

.sdc-image-banner-link svg {
  width: var(--sdc-image-banner-font-size);
  height: var(--sdc-image-banner-font-size);
}

.sdc-image-banner-link svg path {
  fill: var(--sdc-image-banner-link-text-color);
}

.sdc-image-banner-link a:hover svg path {
  fill: var(--sdc-image-banner-link-hover-color)!important;
}