.articles {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, 1fr);

  @media screen and (max-width: 768px) {
    grid-template-columns: 1fr;
  }

  .article {
    overflow: hidden;
    display: flex;
    align-items: center;

    .article-name {
      color: #000;
      cursor: pointer;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      @media screen and (max-width: 768px) {
        display: -webkit-inline-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
      }
    }
  }

  .article-icon {
    margin-right: 8px;
  }
}

.article-wrapper {
  .site-header {
    display: flex;
    align-items: center;

    svg {
      margin-right: 8px;
    }
  }

  .order-wrapper {
    margin-top: 32px;

    .card-buttons {
      justify-content: flex-start;
    }

    .card-item .button {
      width: auto;
    }
  }

  .site-footer {
    flex-direction: column;
    gap: 16px;

    h3 {
      font-family: Proxima Nova;
      font-size: 22px;
      font-style: normal;
      font-weight: 600;
      line-height: 28px;
      letter-spacing: 0.352px;
      margin: 0;
    }
  }
}

.article-page {
  .content-container {
    padding-top: 0;
  }
}

@media screen and (max-width: 768px) {
  .article-wrapper {
    .order-wrapper {
      margin-top: 16px;

      .card-item {
        overflow: hidden;

        .card-content {
          width: 100%;
        }

        .icon-container {
          margin-top: -68px;

          img {
            position: relative;
            top: 40px
          }
        }
      }
    }
  }
}