main.soulody > section#hero {
  grid-area: hero;
  position: relative;
  padding: 24px;
  background: url(../../assets/hero-placeholder.png) center / cover no-repeat;
  border-radius: 24px;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  justify-items: start;
  align-items: center;
  row-gap: 0;
  grid-template-areas:
    "headers"
    "perex";

  @media screen and (max-width: 930px) {
    row-gap: 56px;
    padding: 16px;
  }

  > video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
  }

  > header {
    max-width: 816px;
    z-index: 2;

    @media screen and (max-width: 930px) {
      align-self: end;
    }
  }

  > main {
    max-width: 461px;
    z-index: 2;
    margin-bottom: 40px;
  }
}