@layer specific {
  .post-feed {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin: 0 -20px;
    padding: 40px 0 0 0;
  }

  .alert-banner {
    flex: 1 1 100%;
    margin: 0 20px 40px;
    padding: 2rem 2.5rem;
    background: #b3261e;
    color: #fff;
    border-radius: 5px;
    box-shadow: rgba(39, 44, 49, 0.06) 8px 14px 38px,
      rgba(39, 44, 49, 0.03) 1px 3px 8px;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.5em;
    text-align: center;
  }

  .post-card {
    flex: 1 1 300px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0 20px 40px;
    min-height: 300px;
    background: #fff center center;
    background-size: cover;
    border-radius: 5px;
    box-shadow: rgba(39, 44, 49, 0.06) 8px 14px 38px,
      rgba(39, 44, 49, 0.03) 1px 3px 8px;
    transition: all 0.5s ease;
  }

  .post-card-content {
    position: relative;
    display: block;
    padding: 25px 25px 0;
    color: var(--darkgrey);
  }

  .post-card-content-link:hover {
    text-decoration: none;
  }

  .post-card-tags {
    display: block;
    margin-bottom: 4px;
    color: var(--midgrey);
    font-size: 1.2rem;
    line-height: 1.15em;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }

  .post-card-title {
    margin-top: 0;
  }

  .post-card-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .post-card-meta {
    padding: 0 25px 25px;
  }

  /* Special Styling for home page grid (below):
  
    The first (most recent) post in the list is styled to be bigger than the others and take over the full width of the grid to give it more emphasis. Wrapped in a media query to make sure this only happens on large viewports / desktop-ish devices.
  
     */

  .home-template .post-feed .post-card.post-card--large:not(.no-image) {
    flex-direction: row;
    flex: 1 1 100%;
  }

  @media (min-width: 768px) {
    .home-template
      .post-feed
      .post-card.post-card--large:not(.no-image)
      .post-card-content {
      flex: 0 1 357px;
    }

    .home-template .post-feed .post-card.post-card--large:not(.no-image) h2 {
      font-size: 2.6rem;
    }

    .home-template .post-feed .post-card.post-card--large:not(.no-image) p {
      font-size: 1.8rem;
      line-height: 1.55em;
    }

    .home-template
      .post-feed
      .post-card.post-card--large:not(.no-image)
      .post-card-content {
      padding: 30px 40px 0;
    }

    .home-template
      .post-feed
      .post-card.post-card--large:not(.no-image)
      .post-card-meta {
      padding: 0 40px 30px;
    }
  }

  .main-card__calendar {
    user-select: none;
    margin: 0 auto;
  }

  .main-card__calendars {
    min-width: 100%;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    display: grid;
  }

  /* Adjust some margins for smaller screens */
  @media (max-width: 650px) {
    .post-feed {
      padding-top: 5vw;
    }
    .post-card {
      margin: 0;
    }
    .alert-banner {
      margin: 0 0 5vw;
      border-radius: 0;
    }
  }

  @media (min-width: 960px) {
    .home-template .post-feed {
      margin-top: -70px;
      padding-top: 0;
    }
    .home-template .site-nav {
      position: relative;
      top: -70px;
    }
  }

  /* Specific styling for the initial _visit_ post-card */
  .post-card--visit {
    display: block;
  }

  .main-card__content {
    text-align: center;
  }

  .main-card__notes {
    text-align: left;
  }

  @media (min-width: 768px) {
    .main-card__content {
      text-align: left;
    }
  }

  @media (min-width: 795px) {
    .main-card__content {
      display: grid;
      grid-gap: var(--small-margin);

      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
      grid-template-rows: auto;
      grid-template-areas: 'bottom_left bottom_left bottom_left bottom_right bottom_right bottom_right';
    }

    .main-card__hr {
      margin: 3rem 0;
    }

    .main-card__map-container {
      grid-area: bottom_left;
    }

    .main-card__notes {
      grid-area: bottom_right;
    }
  }

  .main-card__map {
    min-width: 150px;
    width: 100%;
    height: 100%;
    border: 0;
  }

  .event-card__hero {
    display: block;
    width: 100%;
    height: auto;
  }

  @media (min-width: 795px) {
    .event-card__content {
      display: grid;
      grid-gap: 45px;
      grid-template-columns: 4fr 1fr;
      grid-template-areas:
        'hero hero'
        'main aside';
    }

    .event-card__hero {
      grid-area: hero;
    }

    .event-card__main {
      grid-area: main;
    }

    .event-card__info {
      grid-area: aside;
    }
  }

  .event-card__info h2 {
    margin-top: 0;
  }

  .event-card__info dl {
    margin: 0;
  }

  .event-card__info dt {
    float: none;
    width: auto;
    margin: 1.2rem 0 0;
    text-align: left;
    font-weight: 600;
  }

  .event-card__info dt:first-of-type {
    margin-top: 0;
  }

  .event-card__info dd {
    margin: 0.2rem 0 0;
  }

  .event-card__cta {
    margin-top: 2rem;
  }

  .event-card__cta .button {
    width: 100%;
  }

  .home-template
    .post-feed
    .post-card.post-card--large:not(.no-image)
    .event-card__cta-note {
    margin: 0.8rem 0 0;
    font-size: 1.5rem;
  }

  /* Styling for second post-card */
}