/* ARTICLE LAYOUT */

.article-wrapper{
  display:flex;
  justify-content:center;
  padding:5em 16em;
}

.article{
  width:100%;
}

.article h1{
  font-size:2.4em;
  margin-bottom:1em;
  color:#12609d;
}

/* ARTICLE CONTENT */

.article-content{
  gap:1.4em;
}

.subheading {
  line-height:1.7;
  color:#12609d;
  max-width:none;
  margin-bottom: 0.5em;
}

.article-content p{
  line-height:1.7;
  color:#12609d;
  max-width:none;
  margin-bottom:1.4em;
}

/* IMAGES */

.article-image-1,
.article-image-2{
  max-width:50%;
  height:auto;
  border-radius:10px;
  box-shadow:0px 5px 15px rgba(0,0,0,0.2);
  margin-bottom:1em;
}

/* IMAGE RIGHT */

.article-image-1{
  float:right;
  margin-left:2em;
}

/* IMAGE LEFT */

.article-image-2{
  float:left;
  margin-right:2em;
}

/* CLEAR FLOAT AT END */

.article-content::after{
  content:"";
  display:block;
  clear:both;
}

/* Button */

.all-articles-btn{
  display:block;
  margin:1.1em auto 0;
  background:#fad02c;
  color:white;
  border:none;
  padding:0.7em 1.4em;
  border-radius:8px;
  font-size:1.1em;
  cursor:pointer;
  transition:all 0.25s ease;
  align-self:center;
  font-weight:400;
}

.all-articles-btn:hover{
  background:#e8bb0a;
  transform:translateY(-1px);
}


/* ======================= */
/* TABLET */
/* ======================= */

@media (max-width:1200px){

  .article-wrapper{
    padding:4em 8em;
  }

}


/* ======================= */
/* SMALL TABLET & MOBILE */
/* ======================= */

@media (max-width:900px){

  .article h1{
    font-size:2em;
  }

    .article-wrapper{
    padding:2em 2.5em;
  }

  .article-image-1,
  .article-image-2{
    float:none;
    max-width:100%;
    display:block;
    margin:1em auto 2em auto;
  }

}