.piece-intro {
  background-color: var(--color-primary-light);
  padding: 65px 0 75px 0;
  color: var(--color-white);

  .container {
    display: flex;
    gap: calc(100% / 12);
    align-items: center;
  }
}

.piece-intro-content {
  width: 100%;

  @media (min-width: 768px) {
    width: calc(100% / 12 * 5);
  }

  .redactor {
    h1, h2, h3 {
      font-weight: var(--font-weight-regular);
    }

    p {
      line-height: 1.2em;
    }
    margin-bottom: 45px;
  }
}

.piece-intro-content-image-mobile {
  margin-bottom: 45px;
  
  @media (min-width: 768px) {
    display: none;
  }
}

.piece-intro-content-metadata {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.piece-intro-content-metadata-wrapper {
  margin: 0;

  dd {
    margin: 0;
  }
}

.piece-intro-content-metadata-title {
  font-family: var(--font-family-sans-serif);
  font-size: var(--font-size-regular);
  font-weight: var(--font-weight-bold);
}

.piece-intro-image {
  width: calc(100% / 12 * 6);
  display: none;

  @media (min-width: 768px) {
    display: unset;
  }
}