.empty-state {
  padding: 4rem 0;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  @include flex-c;
  width: 100%;
  flex-direction: column;

  &.page {
    background: transparent;
  }

  div {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    text-align: center;
  }

  h1 {
    font-size: 3.2rem;
  }

  h2 {
    font-size: 1.8rem;
  }
}

.empty-img {
  width: 100%;
  height: 100%;
  max-height: 30rem;
  max-width: 40rem;

  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
