.recipe {
  width: 100%;
  max-width: 1366px;

  margin: 0 auto;

  display: flex;
  flex-direction: column;
  gap: 32px;
}

.hero {
  position: relative;

  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;

  app-go-back {
    position: absolute;
    top: 8px;
    left: 8px;
  }

  @media screen and (max-width: 1280px) {
    flex-direction: column;
  }
}

.recipe__picture {
  display: flex;
  flex: 1;
  aspect-ratio: 16 / 9;

  max-width: 584px;

  background-size: cover;
  background-position: center;

  border-radius: 12px;

  @media screen and (max-width: 1280px) {
    width: 100%;
  }
}

.recipe__informations {
  display: flex;
  flex-direction: column;
  gap: 24px;

  @media screen and (max-width: 1280px) {
    width: 100%;
  }
}

.author__options {
  display: flex;
  gap: 8px;

  app-button {
    width: 100%;
  }
}

.recipe__data {
  display: flex;
  justify-content: space-between;
  gap: 0 24px;

  @media screen and (max-width: 1280px) {
    width: 100%;
  }
}

.recipe__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.recipe__topics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.recipe__topic {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;

  text-align: center;
}

.recipe__description {
  display: flex;
  gap: 24px;

  @media screen and (max-width: 1280px) {
    flex-direction: column;
  }
}

.recipe__ingredients,
.recipe__steps {
  flex: 1;

  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ingredients__list,
.steps__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.recipe__ingredient {
  list-style: disc;
  list-style-position: inside;
}

.recipe__ingredient,
.recipe__step {
  display: flex;
  align-items: center;
  gap: 16px;

  .number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 24px;

    color: var(--green-300);
  }

  p {
    flex: 1;
  }
}
