.hero {

  min-height: var(--hero-height, 100px);

  &.project-hero-header {
    background-image: linear-gradient(
      to bottom right,
      hsl(155 65% 25% / 0.8),
      hsl(155 25% 90% / 0.6)
      ),
      var(--hero-background);
  }

  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-position: center;

  &.full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    max-height: inherit;
  }

  .hero__content {
    display: flex;
    align-items: center;

    &:has(.card) {
      align-items: stretch;
      gap: 2rem;
    }
  }

    &:has(.hero__side-image) {
    justify-content: space-between;

    .hero__side-image {
      background-image: var(--hero-background);
      min-height: var(--hero-height);
      background-size: cover;
    }

    .hero__content {
      padding: 1rem 5%;
    }
  }

  .paragraph__column {
    padding: 0;
  }
}