/* Posts */
.posts {
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 0 0em -1em;
    width: calc(100% + 4em); }
    .posts article {
      -moz-flex-grow: 0;
      -webkit-flex-grow: 0;
      -ms-flex-grow: 0;
      flex-grow: 0;
      -moz-flex-shrink: 1;
      -webkit-flex-shrink: 1;
      -ms-flex-shrink: 1;
      flex-shrink: 1;
      margin: 0 2em 1em 0em;
      position: relative;
      width: calc(33.33333% - 2em); }
      .posts article:before {
        background: rgba(210, 215, 217, 0.75);
        content: '';
        display: block;
        height: calc(100% + 2em);
        left: -2em;
        position: absolute;
        top: 0;
        /*width: 1px; */}
      .posts article:after {
        background: rgba(210, 215, 217, 0.75);
        bottom: 0em;
        content: '';
        display: block;
        /*height: 1px; */
        position: absolute;
        right: 0;
        width: calc(100% + 6em); }
      .posts article > :last-child {
        margin-bottom: 0; }
      .posts article .image {
        display: block;
        margin: 0 0 2em 0; }
        .posts article .image img {
          display: block;
          width: 100%; 
          max-width:100%;}

    @media screen and (min-width: 1681px) {
      .posts article:nth-child(3n + 1):before {
        display: none; }
      .posts article:nth-child(3n + 1):after {
        width: 100%; }
      .posts article:nth-last-child(1), .posts article:nth-last-child(2), .posts article:nth-last-child(3) {
        margin-bottom: 0; }
        .posts article:nth-last-child(1):before, .posts article:nth-last-child(2):before, .posts article:nth-last-child(3):before {
          height: 100%; }
        .posts article:nth-last-child(1):after, .posts article:nth-last-child(2):after, .posts article:nth-last-child(3):after {
          display: none; } }
    @media screen and (max-width: 1680px) {
      .posts article {
        width: calc(50% - 6em); }
        .posts article:nth-last-child(3) {
          margin-bottom: 6em; } }
    @media screen and (min-width: 481px) and (max-width: 1680px) {
      .posts article:nth-child(2n + 1):before {
        display: none; }
      .posts article:nth-child(2n + 1):after {
        width: 100%; }
      .posts article:nth-last-child(1), .posts article:nth-last-child(2) {
        margin-bottom: 0; }
        .posts article:nth-last-child(1):before, .posts article:nth-last-child(2):before {
          height: 100%; }
        .posts article:nth-last-child(1):after, .posts article:nth-last-child(2):after {
          display: none; } }
    @media screen and (max-width: 736px) {
      .posts {
        margin: 0 0 2em -4.5em;
        width: calc(100% + 4.5em); }
        .posts article {
          margin: 0 0 4.5em 4.5em;
          width: calc(50% - 4.5em); }
          .posts article:before {
            height: calc(100% + 4.5em);
            left: -2.25em; }
          .posts article:after {
            bottom: -2.25em;
            width: calc(100% + 4.5em); }
          .posts article:nth-last-child(3) {
            margin-bottom: 4.5em; } }
    @media screen and (max-width: 480px) {
      .posts {
        margin: 0 0 2em 0;
        width: 100%; }
        .posts article {
          margin: 0 0 4.5em 0;
          width: 100%; }
          .posts article:before {
            display: none; }
          .posts article:after {
            width: 100%; }
          .posts article:last-child {
            margin-bottom: 0; }
            .posts article:last-child:after {
              display: none; } }

/* footer cards */

.footer-cards {
  max-width: 900px;
  margin: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.footer-card {
  padding: 1rem;
}

.bottom-cards {
  max-width: 900px;
  min-height: 30px;
  margin-top: 25px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.bottom-card {
  background-color: #014461;
  color: white;
  font-size:0.8em;
  text-align: center;
}

a.bottom-card {
  color: white;
  text-decoration: none;
}
p.bottom-card {
  color: white;
  text-align: center;
}




/*
@media (min-width: 600px) {
  .footer-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .footer-cards { grid-template-columns: repeat(3, 1fr); }
} 
*/