:root {
  --button-background: var(--color-surface-tertiary);
  --button-background-hover: var(--color-surface-secondary);
  --button-color-hover: var(--color-text-secondary);
  --button-icon-hover-filter: grayscale(1) brightness(5);
  --button-color: var(--color-text-primary);
}

:root {
  --basic-button-background: var(--color-surface-neutral);
  --basic-button-color: var(--color-text-primary);
}

.block__sdc-homepage-banner {
  width: 100%;
  height: var(--full-height);
  position: relative;
  padding: var(--spacing-sm);
}
.block__sdc-homepage-banner .hero-image {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  border-radius: var(--border-radius-primary);
}
.block__sdc-homepage-banner .hero-image img, .block__sdc-homepage-banner .hero-image video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.block__sdc-homepage-banner .text-wrapper {
  display: flex;
  position: absolute;
  bottom: calc(var(--spacing-md) * 2);
  left: calc(var(--spacing-md) + var(--spacing-sm));
  align-items: center;
}
.block__sdc-homepage-banner .text-wrapper h1 {
  font: var(--type-h1);
  font-size: 7vw;
  color: var(--color-text-secondary);
}
.block__sdc-homepage-banner .button {
  width: var(--spacing-md);
  height: var(--spacing-md);
  background-color: var(--color-surface-tertiary);
  background-image: var(--icon-arrow-blue-down);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  position: absolute;
  bottom: var(--spacing-md);
  border-radius: var(--spacing-md);
  left: calc(var(--full-width) / 2 - var(--spacing-md) / 2);
  cursor: pointer;
  transition: background-position 0.3s, transform 0.3s;
}
.block__sdc-homepage-banner .button:hover {
  background-position: 50% 60%;
  transform: scale(1.1);
}
@media screen and (max-width: 768px) {
  .block__sdc-homepage-banner .text-wrapper {
    bottom: calc(var(--spacing-sm) * 2);
    left: calc(var(--spacing-sm) * 2);
  }
  .block__sdc-homepage-banner .text-wrapper h1 {
    font: var(--type-h1);
    font-size: 40px;
  }
  .block__sdc-homepage-banner .text-wrapper h1 span {
    display: block !important;
  }
}