@import '../../components/heros/hero-left.css';
@import '../../components/cards/card-article.css';
.hero-left {
  padding-bottom: 0;
  .hero-left-bottom {
    margin-top: 80rem;
    align-items: center;
  }
  @media (max-width: 740rem) {
    .hero-left-bottom {
      align-items: flex-start;
      margin-top: 40px;
    }
  }
}
#article {
  background: var(--silver);
  color: var(--black);
  padding: 120rem var(--margin);
  #article-body, #article-footer {
    width: 100%;
    margin: 0 auto;
  }
  #article-body {
    max-width: 912rem;
    font-size: 18rem;
    
    
    h1 {
      font-family: 'Plexes';
      font-weight: 900;
      font-size: 32px;
      line-height: 1.1;
      letter-spacing: -2%;
    }
    p {
      max-width: 680rem;
      margin-left: auto;
      margin-right: auto;
    }
    img {
      max-width: 100%;
      width: 100%;
      object-fit: contain;
      height: auto;
    }
  }
  #article-footer {
    max-width: 680rem;
    margin-top: 60rem;
    hr {
      width: 100%;
      height: 1px;
      border: none;
      background: currentColor;
      opacity: 0.16;
      margin-bottom: 60rem;
    }
    #article-footer-download {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 70rem;
      #article-footer-title {
        max-width: 280rem;
        font-family: 'Plexes';
        font-style: normal;
        font-weight: 900;
        line-height: 1;
        letter-spacing: -0.02em;
        text-transform: uppercase;
      }
    }
    #article-footer-share {
      display: flex;
      align-items: center;
      gap: 30rem;
      font-family: 'Plexes';
      font-style: normal;
      font-weight: 900;
      font-size: 16rem;
      line-height: 1;
      letter-spacing: -0.02em;
      text-transform: uppercase;
      .share-buttons {
        display: flex;
        align-items: center;
        gap: 16rem;
        .share-button {
          color: var(--orange);
          cursor: pointer;
        }
      }
    }
  }
  @media (max-width: 580rem) {
    padding: 50px var(--margin);
    #article-body {
      font-size: 16rem;
      h1 {
        font-size: 24rem;
      }
    }
    #article-footer {
      margin-top: 50px;
      hr {
        margin-bottom: 50px;
      }
      #article-footer-download {
        flex-direction: column;
        align-items: flex-start;
        gap: 50rem;
        #article-footer-title {
          max-width: 300px;
          font-size: 20px;
        }
      }
      #article-footer-share {
        gap: 30rem;
        font-size: 16px;
        .share-buttons {
          gap: 16rem;
          .share-button {
          }
        }
      }
    }
  }
}

#related {
  margin: 80rem var(--margin);
  #related-top {
    margin-bottom: 50rem;
    #related-title {
    }
  }
  #related-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 50rem var(--gap);
    .card-article {
      width: calc(var(--column) * 4 + var(--gap) * 3);
    }
  }
  @media (max-width: 740rem) {
    #related-grid {
      .card-article {
        width: 100%;
      }
    }
  }
  @media (max-width: 580rem) {
    margin: 50rem var(--margin);
    margin-bottom: 0;
    #related-top {
      margin-bottom: 30rem;
      #related-title {
        font-size: 36px;
      }
    }
    #related-grid {
      gap: 24rem var(--gap);
      .card-article {
        width: 100%;
      }
    }
  }
}