.site-main {
    & header.block.post-header {
        & .content {
            padding-top: 2.5rem;
        }
    }

    & .block.container--posts {
        & .content {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 30px;
            padding: 2.5rem 0;

            & .post {
                position: relative;
                z-index: 0;
                aspect-ratio: 5 / 4;
                padding: 6px;
                border-radius: 1rem;
                corner-shape: squircle;
                display: grid;
                place-content: end;
                overflow: hidden;

                &:before {
                    position: absolute;
                    z-index: -2;
                    content: '';
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    border-radius: inherit;
                    corner-shape: squircle;
                    box-shadow: inset 0px 2px 12px 0px rgba(0, 0, 0, 0);
                }

                & .backdrop {
                    position: absolute;
                    z-index: -4;
                    content: '';
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    width: 0;
                    height: 0;
                    border-radius: 50%;
                    background-color: light-dark(var(--background-secondary-light), var(--background-secondary-dark));
                }

                & .wp-post-image {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%) perspective(1000px) rotateX(-270deg);
                    backface-visibility: hidden;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: 1rem;
                    corner-shape: squircle;
                    z-index: 2;
                    transition: filter .3s ease-in-out;
                }

                & .post--content {
                    position: relative;
                    z-index: 2;
                    display: block;
                    padding: 10px 20px;
                    background-color: light-dark(var(--background-header-light), var(--background-header-dark));
                    backdrop-filter: blur(7px);
                    border-radius: .5rem;
                    corner-shape: squircle;
                    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
                    transform: translateY(150%);

                    & .post--categories {
                        margin-bottom: .5rem;

                        & > *:not(:last-child) {
                            margin-right: 3px;
                        }
                    }

                    & .post--permalink {
                        color: light-dark(var(--text--light), var(--text--dark));
                        
                        & .post--title {
                            font-size: calc(var(--wp--preset--font-size--small) + 2px);
                            font-weight: 500;
                            line-height: 1.7;
                        }
                    }
                }

                &.animate-in {
                    animation: bounce .6s ease-in-out forwards;

                    &:before {
                        animation: shadow-post--animation .6s ease-in-out 1.1s forwards;
                    }

                    & .backdrop {
                        animation: backdrop-post--animation 1s ease-in-out forwards;
                    }

                    & .wp-post-image {
                        animation: thumbnail-post--animation .6s ease-in-out 1.5s forwards;
                    }

                    &:hover {
                        & .wp-post-image {
                            filter: brightness(1.2)
                        }
                    }

                    & .post--content {
                        animation: post-permalink--animation .7s ease-in-out 1s forwards;
                    }
                }
            }
        }
    }
}

@keyframes bounce {
  from,
  20%,
  53%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }

  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }

  80% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }

  90% {
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}

@keyframes backdrop-post--animation {
    0% {
        width: 0;
        height: 0;
        border-radius: 50%;
    }

    10% {
        width: 25px;
        height: 25px;
        border-radius: 50%;
    }

    90% {
        width: 25px;
        height: 25px;
        border-radius: 50%;
    }

    100% {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
}

@keyframes shadow-post--animation {
    0% {
        box-shadow: inset 0px 2px 12px 0px rgba(0, 0, 0, 0);
    }
    100% {
        box-shadow: inset 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
    }
}

@keyframes thumbnail-post--animation {
    0% {
        transform: translate(-50%, -50%) perspective(1000px) rotateX(-270deg);
    }

    100% {
        transform: translate(-50%, -50%) perspective(1000px) rotateX(0deg);
    }
}

@keyframes post-permalink--animation {
    0% {
        transform: translateY(150%);
    }

    100% {
        transform: translateY(0);
    }
}