.component-hero.full {
  .paragraph--content {
    padding-right: calc(var(--component-hero-content-padding-right, 10rem) * 0.5);
    padding-left: calc(var(--component-hero-content-padding-left, 10rem) * 0.5);
    position: absolute;
    top: 50%;
    transform: translate(0%, -50%);
    width: 100%;
  }
  .paragraph--text {
    max-width: var(--component-hero-text-width);
  }
  .paragraph--links .field__items {
    display: flex;
    gap: 1rem;
    margin: 20px 0 0 -1rem; // -1rem removes the gap at the beginning.
  }
  .btn,
  .btn.active {
    border: 1px solid var(--btn-border-color);
    background-color: var(--btn-background-color);
    color: var(--btn-label-color);
    border-radius: var(--btn-border-radius);

    &:hover {
      background-color: var(--btn-label-color);
      color: #fff
    }

    &:focus-visible {
      
    }
  }
}