/* 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  :)  */
#featured-post .meta {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center; }
  #featured-post .meta p {
    margin: 0; }
  #featured-post .meta .seperator {
    margin: 0 6px; }

#articles {
  background: #F4F4F4;
  /* 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  :)  */ }
  #articles .sort-and-search .orderby,
  #articles .sort-and-search .search input {
    background: #FFFFFF;
    border: 1px solid #D6D6D6;
    border-radius: 11px;
    padding: 24px 5px 24px 36px;
    margin-top: 0;
    height: 75px;
    width: 100%;
    font-size: 20px; }
  #articles .sort-and-search .orderby {
    color: #707070;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23FFA300' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .85rem center;
    background-size: 42px 20px;
    appearance: none; }
    @media screen and (min-width: 1025px) {
      #articles .sort-and-search .orderby {
        max-width: 245px; } }
  #articles .sort-and-search .search {
    position: relative;
    width: 100%; }
    @media screen and (min-width: 1141px) {
      #articles .sort-and-search .search {
        max-width: 536px; } }
    #articles .sort-and-search .search::placeholder {
      color: #707070; }
    #articles .sort-and-search .search button {
      position: absolute;
      top: 15px;
      right: 16px;
      background: none;
      border: none;
      padding: 10px;
      color: #FFA300; }
  #articles .posts {
    /* 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  :)  */ }
    #articles .posts .post-card {
      background: white;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start; }
      #articles .posts .post-card .image {
        position: relative;
        padding-top: 62.5%;
        overflow: hidden; }
        #articles .posts .post-card .image picture {
          position: absolute;
          top: 0;
          left: 0;
          width: 100% !important;
          height: 100% !important;
          max-width: 100% !important;
          max-height: 100% !important; }
          #articles .posts .post-card .image picture img {
            width: 100% !important;
            height: 100% !important;
            max-width: 100% !important;
            max-height: 100% !important;
            object-fit: cover;
            object-position: center center; }
      #articles .posts .post-card .content {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        flex: 1 1 auto;
        padding: 50px 48px 0 48px; }
        #articles .posts .post-card .content .meta {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center; }
          #articles .posts .post-card .content .meta p {
            margin: 0; }
          #articles .posts .post-card .content .meta .seperator {
            margin: 0 6px; }
        #articles .posts .post-card .content a {
          color: black; }
          #articles .posts .post-card .content a:hover {
            color: #FFA300; }
      #articles .posts .post-card .footer {
        display: row;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        flex: 0 0 30px;
        padding: 30px 48px 50px 48px; }
        #articles .posts .post-card .footer a {
          color: #FFA300;
          font-size: 18px;
          font-weight: bold;
          text-transform: uppercase; }
          #articles .posts .post-card .footer a:hover {
            color: black; }
  #articles .pagination .spacer {
    height: 1px;
    background: #0000001a;
    width: 100%;
    margin-right: 60px;
    margin-left: 14%; }
  #articles .pagination .nav-links {
    display: flex;
    flex-direction: row;
    justify-content: flex-start; }
    #articles .pagination .nav-links .page-numbers {
      height: 65px;
      width: 65px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 22px;
      text-transform: uppercase;
      font-weight: bold;
      color: black;
      border: 1px solid #FFA300;
      margin-right: 15px; }
      #articles .pagination .nav-links .page-numbers:last-child {
        margin-right: 0; }
      #articles .pagination .nav-links .page-numbers.current, #articles .pagination .nav-links .page-numbers:not(.dots):hover {
        color: white !important;
        background-color: #FFA300 !important; }
      #articles .pagination .nav-links .page-numbers.next, #articles .pagination .nav-links .page-numbers.prev {
        display: none; }
  @media screen and (max-width: 769px) {
    #articles .pagination .spacer {
      display: none; }
    #articles .pagination .nav-links .page-numbers {
      height: 45px;
      width: 45px;
      font-size: 19px; } }