.artist-hero {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-70);

  @media (min-width: 1280px) {
    flex-direction: row;
  }

  & .artist-hero__content {
    display: flex;
    flex: 1;
    flex-direction: column;

    & * {
      margin: 0;
    }

    & .artist-hero__location {
      color: var(--color-text-subtle);
      font-size: var(--font-size-md);
      margin-top: var(--spacing-40);
    }

    & .artist-hero__description {
      font-size: var(--font-size-xl);
      margin-top: auto;
      padding-top: var(--spacing-50);

      & *:not(:first-child) {
        margin-top: var(--spacing-40);
      }
    }
  }

  & .artist-hero__media {
    align-self: flex-start;
    aspect-ratio: 43 / 25;
    background: var(--color-surface-product);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    width: 100%;

    @media (min-width: 1280px) {
      width: calc(var(--layout-content) / var(--layout-wide) * 100%);
    }

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