/* ==========================================================================
   ARTICLE SUMMARY — UI v1 component
   ========================================================================== */

.article-summary{
  margin:22px 0 28px;
  padding:18px 20px;
  border-left:4px solid var(--green);
  border-radius:10px;
  background:#f4f6f5;
}
.article-summary>span{
  display:block;
  margin-bottom:7px;
  color:var(--green);
  font-size:10px;
  font-weight:900;
  letter-spacing:.7px;
}
.article-summary p{margin:0;font-size:18px;line-height:1.5}

@media(max-width:600px){
  .article-summary{padding:15px 16px}
  .article-summary p{font-size:16px}
}

@media (min-width:1001px){
  .article-summary{
    padding:20px 22px;
  }
  .article-summary p{
    font-size:17px;
    line-height:1.55;
  }
}

.article-summary{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:13px;
  align-items:start;
  margin:0 0 30px;
  padding:18px 20px;
  border:1px solid var(--line);
  border-left:3px solid var(--green);
  border-radius:11px;
  background:#fff;
  box-shadow:0 2px 10px rgba(16,35,45,.025);
}
.article-summary-icon{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--green);
  color:#fff;
  font-weight:900;
}
.article-summary>div>span{
  display:block;
  margin-bottom:5px;
  color:var(--green);
  font-weight:900;
  letter-spacing:.62px;
}
.article-summary p{
  margin:0;
  color:#31454e;
}

@media(max-width:700px){
  .article-summary{
    grid-template-columns:30px minmax(0,1fr);
    gap:10px;
    margin-bottom:24px;
    padding:14px 14px 14px 12px;
    box-shadow:none;
  }
  .article-summary-icon{
    width:28px;
    height:28px;
  }
}