.recipe-article {
  width: 100%;
  border-bottom: 1px solid rgb(var(--color-scheme-text));
}

.recipe-article__hero {
  width: 100%;
  display: flex;
  flex-direction: column;

  @media (min-width: 1024px) {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

.recipe-article__hero-media-container {
  width: 100%;
  height: 100%;
  position: relative;
  border-bottom: 1px solid rgb(var(--color-scheme-text));

  @media (min-width: 1024px) {
    border-right: 1px solid rgb(var(--color-scheme-text));
    border-bottom: none;
  }
}

.recipe-article__hero-media {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  position: relative;
  overflow: hidden;
}

.recipe-article__hero-media .image-gallery__carousel,
.recipe-article__hero-media .image-gallery__slide {
  height: 100%;
}

.recipe-article__hero-content {
  padding-block: var(--spacing);
  padding-inline: var(--section-horizontal-spacing);
  display: flex;
  flex-direction: column;
  gap: var(--spacing);
}

.recipe-article__hero-heading {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-wrap: balance;
}

.recipe-article__hero-heading p {
  color: #8a8a8a;
  font-style: italic;
}

.recipe-article__hero-text {
  display: flex;
  flex-direction: column;
  font-size: var(--type-scale-n0);
  line-height: 1.4;
}

.recipe-article__hero-text h2,
.recipe-article__hero-text h3,
.recipe-article__hero-text h4,
.recipe-article__hero-text h5,
.recipe-article__hero-text h6 {
  font-size: var(--type-scale-n-1);
  font-family: var(--body-font-stack);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a8a8a;
  padding-bottom: 2px;
  
  &:not(:first-child) {
    padding-top: var(--spacing);
  }
}