.ph-hero-post{
    padding-top: calc(100% * 780 / 1440);
    height:0;
    min-height: 78rem;
}
.ph-hero-post-image{
    position:absolute;
    top: 0; 
    left: 0;
    height: 100%;
    width: 100%;
    background-repeat:no-repeat;
    background-size: auto 100%;
    background-position:center;
    display: block;
}
.ph-hero-post-image-layer{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
}
.ph-hero-post-content{
    padding-top:11.9rem;
    position:absolute;
    bottom:6rem;
    left:0;
    right: 0;
    z-index:20;
    display:flex;
}
.ph-hero-post-date{
    color:white;
    width:30rem;
}
.ph-hero-post-content .ph-hero-post-title{
    color:white;
    margin:0;
    padding:0;
    max-width: 53.9rem;
    display: block;
    margin-bottom:4rem;
}
.ph-hero-post-content .ph-hero-post-title:hover{
    color:var(--ph-color-2);
}
.ph-hero-post-metas{
    display:flex;
}
.ph-hero-post-cat a{
    color:white;
}
.ph-hero-post-cat a:hover{
    text-decoration:underline;
}
.ph-hero-post-tags{
    margin-left:1.6rem;
}
.ph-hero-post-tags a{
    color:var(--ph-color-4);
}
.ph-hero-post-tags a:hover{
    text-decoration:underline;
}


@media (max-width: 1200px){
   
}

@media (max-width: 1024px){
    
}

@media (max-width: 767px){
    .ph-hero-post{
        padding-top: calc(100% * 450 / 360);
        min-height: 0;
    }
    .ph-hero-post-content {
        display: block;
        bottom: 2.4rem;
    }
    .ph-hero-post-content .ph-hero-post-title {
        margin-bottom: 2.4rem;
    }
    .ph-hero-post-date {
        width: 100%;
        margin-bottom:2.4rem;
    }
}