/* Added fallbacks to help with CLS, feel free to remove if it doesn't help on your project */
/* Colours */
/* Fluid heading sizes - set your min/max sizes and you're done! */
/* Some device sizes to use with min-width */
/* adjusted breakpoints for above */
/* 100% widths look better than "Snapping" IMO */
/* Utility */
/* Additional Spacers -- don't think you'll need more than 7, but if you do -- maybe just use a custom class  :)  */
.banner {
  position: relative; }
  .banner:after {
    content: '';
    background: linear-gradient(0deg, rgba(50, 50, 52, 0.75) 0%, #323234 100%);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0; }
  .banner .banner-content-wrap {
    z-index: 99;
    position: relative; }

.article-body {
  padding: 100px 0 100px 0; }
  .article-body .posted-on {
    display: block;
    margin-bottom: 1.5rem;
    color: #52524D;
    font-size: 18px; }
  .article-body .content-area {
    color: #52524D;
    position: relative; }
    .article-body .content-area figure {
      display: block;
      margin-bottom: 2.5rem !important; }
    .article-body .content-area h3 {
      font-family: "Montserrat", "Arial Narrow", "Verdana", serif;
      font-weight: 600; }
  .article-body hr {
    margin-top: 4rem;
    margin-bottom: 0; }

aside {
  width: 100% !important;
  background-color: #F8F8F8;
  padding: 3rem 2rem !important; }
  @media (min-width: 1025px) {
    aside {
      width: 500px !important; } }
  aside h3 {
    color: #51806A;
    margin-bottom: 0;
    font-size: 30px;
    font-family: "Montserrat", "Arial Narrow", "Verdana", serif;
    font-weight: 400;
    color: #52524D; }
  aside .post-block {
    padding: 1.5rem 0;
    display: flex; }
    aside .post-block .img {
      width: 130px;
      border-radius: 5px; }
      aside .post-block .img img, aside .post-block .img picture {
        border-radius: 5px;
        width: 130px !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: cover; }
    aside .post-block .post-contet {
      width: calc(100% - 145px);
      padding: 0 0 0 1.5rem; }
      aside .post-block .post-contet h4 {
        line-height: 1.3;
        margin-bottom: 1rem;
        font-size: 20px;
        font-family: "Montserrat", "Arial Narrow", "Verdana", serif;
        font-weight: 400;
        color: #52524D; }
      aside .post-block .post-contet a {
        font-weight: 700;
        font-size: 16px; }
        aside .post-block .post-contet a i {
          color: #52524D;
          margin-left: 5px;
          font-size: 12px; }
  aside .child-cats {
    padding: 0; }
    aside .child-cats li {
      list-style: none;
      padding: 0;
      margin: 0 0 10px 0; }
      aside .child-cats li a {
        color: #52524D;
        font-size: 24px;
        font-weight: 700;
        text-decoration: none; }
        aside .child-cats li a:hover {
          color: #51806A; }