.article-component-wrapper {
  background: white;
  float: left;
  margin-left: 3%;
  margin-bottom: 3%;
  width: 30.3%;
  cursor: pointer;
}
.modal-article .modal-wrapper {
  padding: 40px 0; /* px */
}
.article-pic, .modal-article-pic {
  width: 100%;
  padding-bottom: 62.4%;
  background-size: cover;
  background-position: center;
}
.modal-article-pic {
  padding-bottom: 43%;
  margin-bottom: 32px; /* px */
}
.article-content-wrapper, .modal-article-content-wrapper {
  position: relative;
}
.article-content-wrapper {
  padding: 24px; /* px */
  height: 220px; /* px */
}

.article-component-type {
  position: absolute;
  font-size: 14px; /* px */
  font-weight: 500;
  color: #A25641;
  top: 16px; /* px */
}
.modal-article-content-wrapper .article-component-type {
  top: 0;
  margin-left: 48px; /* px */
}
.article-body-wrapper, .modal-article-body-wrapper {
  position: relative;
  top: 20px; /* px */
  display: flex;
  flex-direction: column;
  justify-items: flex-start;
  align-items: flex-start;
  margin-bottom: 25px; /* px */
}
.article-body-wrapper {
  height: 190px; /* px */
}
.article-title {
  width: 100%;
  font-size: 20px; /* px */
  font-weight: 500;
  line-height: 150%;
  margin-bottom: 10px; /* px */
  flex: none;
}
.modal-article-body-wrapper .article-title {
  box-sizing: border-box;
  padding: 8px 48px 25px 48px; /* px */
}
.modal-article-body-wrapper .article-date {
  margin: 20px 48px 0 48px; /* px */
  width: 100px; /* px */
}
.article-abstract {
  color: #666;
  font-size: 14px; /* px */
  width: 100%;
  line-height: 180%;
  flex: auto;
  overflow: hidden;
  position: relative;
}
.modal-article-body-wrapper .article-abstract {
  width: 100%;
  box-sizing: border-box;
  padding: 0 48px ; /* px */
  font-size: 16px; /* px */
  font-weight: 400;
}

.article-date {
  flex: none;
  margin-top: 20px; /* px */
  color: #b3b3b3;
  width: 100%;
}
.article-readmore {
  float: right;
  color: #A25641;
}

.article-line-wrapper a:first-child > .article-line-component-wrapper {
  margin-left: 0;
  margin-right: 3%;
}

@media screen and (max-width: 1200px) {
  .article-component-wrapper {
    width: 47%;
  }
  .article-title {
    font-size: 18px; /* px */
  }
}
@media screen and (max-width: 779px) {
  .article-component-wrapper {
    width: 97%;
    margin-left: 3%;
    margin-bottom: 32px;
  }
  .article-line-component-wrapper {
    width: 100% !important;
    margin-left: 0;
  }
  .article-title {
    font-size: 16px; /* px */
  }
}