.postgrid {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}





.post {
    position: relative;
    width: calc(25% - 2.7rem);
    margin-left: 3.6rem;
    margin-top: 3.6rem;
}
.post:first-child,
.post:nth-child(2),
.post:nth-child(3) {
    margin-top: 0;
}
.post:nth-child(3n-2) {
    margin-left: 0;
}
.post__img-wrap {
    position: relative;
    width: 100%;
}
.post__img-wrap:before {
    content: '';
    padding-top: 100%;
    display: block;
}
.post__img-wrap .wp-post-image {
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.post__details {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 4.8rem 2.4rem 2.4rem;
    background: rgba(0,0,0,.7);
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 100%);
}
.post__title {

    color: #fff;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.3;
}
.post__link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
}




















.home .postgrid-expo {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.home .post-expo {
    position: relative;
    width: 100%;
    overflow: hidden;
    /*padding-top: 100%;*/
    height: calc(100% - 12.2rem);
}
.home .post-expo .post__img-wrap {
    position: relative;
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}








.home .postgrid-events {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.home .post-events {
    position: relative;
    width: 100%;
    overflow: hidden;
    /*padding-top: 100%;*/
    height: auto;
    /* height: calc(100% - 12.2rem); */
    aspect-ratio: 16/9;
}
.home .post-events .post__img-wrap {
    position: relative;
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}









































































@media all and (max-width: 900px) {




    .postgrid {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }





    .post {
        position: relative;
        width: calc(33.33% - 2.4rem);
        margin-left: 3.6rem;
        margin-top: 3.6rem;


        width: 100%;
        margin-left: 0;
    }
    .post:first-child {
        margin-top: 0;
    }
    .post:nth-child(2),
    .post:nth-child(3) {
        margin-top: 0;


        margin-top: 3.6rem;
    }
    .post:nth-child(3n-2) {
        margin-left: 0;
    }
    .post__img-wrap {
        position: relative;
        width: 100%;
    }
    .post__img-wrap:before {
        content: '';
        padding-top: 100%;
        display: block;
    }
    .post__img-wrap .wp-post-image {
        position: absolute;
        object-fit: cover;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }
    .post__details {
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        padding: 4.8rem 2.4rem 2.4rem;
        background: rgba(0,0,0,.7);
        background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 100%);
    }
    .post__title {

        color: #fff;
        font-size: 2.2rem;
        font-weight: 700;
        line-height: 1.3;
    }
    .post__link {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 5;
    }




















    .home .postgrid-expo {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }
    .home .post-expo {
        position: relative;
        width: 100%;
        overflow: hidden;
        /*padding-top: 100%;*/
        height: calc(100% - 12.2rem);
    }
    .home .post-expo .post__img-wrap {
        position: relative;
        width: 100%;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
    }








    .home .postgrid-events {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }
    .home .post-events {
        position: relative;
        width: 100%;
        overflow: hidden;
        /*padding-top: 100%;*/
        aspect-ratio: 1/1;
    }
    .home .post-events .post__img-wrap {
        position: relative;
        width: 100%;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
    }

















}