.Hero {

padding: 3.5em 0;
text-align: center;

.avatar {
  border: 0.75rem solid var(--color-primary);
  border-radius: 50%;
  height: auto;
}

&__content {
  color: #fff;
  position: relative;
  z-index: 1;
}

&__title {
  margin: 0;
  text-shadow: 1px 1px 0 #000;
}

&.o-circuited {
  background-color: #222;
}

}

.Site–default, .Site–home {

.Hero {
  position: relative;

  &::after {
    background-color: rgba(#000, .1);
    background-image: var(--hero-matrix-url);
    content: "";
    display: block;
    position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
  }
}

.Hero__title {
  max-width: 58rem;
}

}

.Site–post {

.Hero__title {
  text-align: center;
}

.Hero__content {
  flex-direction: column;
  justify-content: center;
}

}

@include breakpoint(“medium”) {

.Hero {
  .avatar {
    max-width: 100%;
  }

  &__content {
    align-items: center;
    display: flex;
  }

  &__title {
    padding: 0 1em;
    text-align: left;
  }
}

}

@include breakpoint(“large”) {

.Hero {
  .avatar {
    margin: 0 5%;
  }
}

}