.wp-block-acf-post-nav {
    display: grid;
}
nav.postnav-grid {
    display: grid;
    justify-content: center;
    align-items: center;
    gap: var(--wp--preset--spacing--30);
    width: 100%;
}
body a.postnav-link,
body span.postnav-link {
    display: grid;
    gap: var(--wp--preset--spacing--20);
    background-image: unset;
    border: none;
    text-decoration: none;
}
body a.postnav-link:hover,
body a.postnav-link:focus,
body span.postnav-link:hover,
body span.postnav-link:focus {
    color: inherit;
}
.postnav-thumbnail {
    position: relative;
    display: flex;
}
.postnav-link img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 16/9;
    height: auto;
}
.postnav-link h3 {
    color: inherit;
    padding: 1px 2px;
    border: unset;
    background-color: unset;
    background-image: linear-gradient(to top, currentColor 100%, currentColor 100%);
    background-repeat: no-repeat;
    background-size: 0% 2px;
    background-position: left 100%;
    transition: background-size .3s ease, color .3s ease;
    text-decoration: none;
    padding: 1px 2px;
}
.postnav-link:hover h3 {
    color: inherit;
    background-size: 100% 2px;
}
span.postnav-separator {
    height: 2px;
    background-color: currentColor;
    width: var(--wp--preset--spacing--60);
    opacity: .7;
    margin: 0 auto;
}
.postnav-text-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--wp--preset--spacing--20);
}
.postnav-icon-label {
    display: flex;
    align-items: center;
    opacity: .7;
    gap: .5ch;
}
.postnav-icon-label p {
    font-size: calc(1rem + .1vw);
}
.postnav-icon-label :is(img, svg) {
    height: 0.9em;
    width: auto;
}

/* --- Card --- */
.postnav-card .postnav-text-content {
    padding: 0;
}

/* --- Cover --- */
.postnav-cover .postnav-text-content {
    color: snow;
    justify-content: center;
}
.postnav-cover nav.post-nav-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}
.postnav-cover .postnav-thumbnail, 
.postnav-cover .postnav-text-content {
    grid-column: 1/2;
    grid-row: 1/2;
}
.postnav-cover a.postnav-link {
    align-items: center;
}
.postnav-cover .postnav-thumbnail::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--wp--preset--color--dark, black);
    opacity: .6;
}
.postnav-cover .postnav-text-content {
    z-index: 3;
}
.postnav-cover .postnav-icon-label {
    opacity: .8;
}

/* --- Only Child --- */
nav.postnav-grid:has(a.postnav-link:only-child),
nav.postnav-grid:has(span.postnav-link:only-child) {
    grid-template-columns: 1fr;
    max-width: calc(32rem + (750 - 16*32)*(1vw/19.2));
}
.wp-block-acf-post-nav:has(a.postnav-link:only-child),
.wp-block-acf-post-nav:has(span.postnav-link:only-child) {
    justify-content: center;
}
nav.postnav-grid:has(a.postnav-link:only-child) h3 {
    text-align: center;
}

.wp-block-acf-post-nav {
    container: postnav-container / inline-size;
    width: 100%;
}
@container postnav-container (min-width:600px) {
    .postnav-grid {
        grid-template-columns: 1fr 1fr;
    }
    .postnav-text nav.postnav-grid {
        grid-template-columns: 1fr 2px 1fr;
    }
    span.postnav-separator {
        height: 100%;
        width: 2px;
    }
    /* --- Split Text --- */
    .postnav-align-split .postnav-next .postnav-text-content {
        align-items: flex-end;
    }
    .postnav-align-split .postnav-previous .postnav-text-content {
        align-items: flex-start;
    }
    /* --- Back To Back --- */
    .postnav-align-back .postnav-next .postnav-text-content {
        align-items: flex-start;
    }
    .postnav-align-back .postnav-previous .postnav-text-content {
        align-items: flex-end;
    }
}