@media only screen and (min-width: 320px) {
    .post-hero-block p {
        color: #FD6034;
        padding: 0 5px;
    }

    .post-hero-block h1 {
        color: #074540;
    }

    .post-hero-block {
        margin-left: calc(-100vw / 2 + 100% / 2);
        margin-right: calc(-100vw / 2 + 100% / 2);
        max-width: 100vw;
        width: auto;
    }

    .article-hero-image {
        margin-bottom: -90px;
        animation: heroImageSlide 1s ease-out forwards; 
        transform: translateY(50px);
        opacity: 0;
      }
      
      /* Keyframes define how the margin-top changes over time */
      @keyframes heroImageSlide {
        0% {
          /* Start 100px above the original position */
          transform: translateY(50px);
          opacity: 0;
        }
        100% {
          /* End at 0px, the normal position */
          transform: translateY(-120px);
          opacity: 1;
        }
      }

}

@media only screen and (min-width: 768px) {
  .article-hero-image {
    padding-bottom: 60px;
  }
}

@media only screen and (min-width: 1024px) {
   
}