header.block {
    & .content {
        & .post-tags {
            display: flex; 
            flex-wrap: wrap;
            gap: 3px;
            justify-content: center;
        }

        & .metadata {
            display: inline-flex; 
            justify-content: center;
            flex-wrap: wrap;

            & > div:not(:last-child) {
                position: relative;

                &:after {
                    content: '●';
                    margin: 0 .5rem;
                    opacity: .4;
                }
            }

            & .comments {
                & span {
                    display: inline-flex;
                    width: .438rem;
                }
            }
        }
    }
}

section.block {
    & .content {
        display: grid; gap: 2rem;

        & .is-layout-constrained {

            & .attachment-full.size-full.wp-post-image {
                width: 100%;
                max-width: 1096px !important;
                border-radius: 1rem;
            }

            & .wp-block-video video {
                border-radius: 1rem;
            }

            & .wp-block-image.alignwide.size-large {
                max-width: 1024px;
            }

            & .wp-block-image {
                img {
                    border-radius: 1rem;
                }
            }
        }

        & .date {
            width: min(100% - 2.5rem, 40.313rem) !important;
            margin-inline: auto;
            display: inline-flex;
            align-items: baseline;
            gap: .5rem;
            opacity: .5;

            & svg {
                position: relative;
                top: 1px;
            }
        }

        & .content-tags {
            width: min(100% - 2.5rem, 40.313rem) !important;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: .438rem;
        }

        & .content-author {
            display: block;
            width: min(100% - 2.5rem, 40.313rem) !important;
            margin-inline: auto;
            padding: 1.25rem;
            border: 0.063rem solid var(--wp--preset--color--accent-6);
            border-radius: 1rem;

            & .author-name {
                margin-bottom: 1rem;
            }

            & .avatar {
                position: relative;
                top: 0.313rem;
                float: left;
                shape-outside: margin-box;
                border-radius: .5rem;
                corner-shape: inherit;
                margin: 0 1.25rem 0 0;
            }

            & .author-description {
                font-size: var(--wp--preset--font-size--small);
            }
        }

        & .post-navigation {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 2.5rem;

            & :is(.left,.right) {
                & a {
                    & .pagination-indicator {
                        display: inline-flex;
                        align-items: center;
                        gap: 7px;
                        transition: color .3s ease;
                    }

                    &:hover {
                        & .pagination-indicator {
                            color: var(--wp--preset--color--main);
                        }
                    }
                }
            }

            & .right {
                text-align: right;
            }
        }
    }

    &.container--related-posts {
        background-color: light-dark(var(--wp--preset--color--secondary), var(--secondary-dark));
        display: grid;
        gap: 2rem;
        padding: 3rem 0;

        & .content.related-posts--title {
            text-align: center;
        }
    }

    & .content-comments {
        width: min(100% - 2.5rem, 40.313rem) !important;
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
}

.block.image-metadata {
    padding: 2.5rem 0;
    display: grid;
    gap: 2rem;
}

@media (width < 31.25rem) {
    header.block {
        & .content {
            & .metadata {
                display: grid;

                & > div:not(:last-child) {
                position: relative;

                &:after {
                    content: '';
                    margin: 0;
                    opacity: .4;
                }
            }
            }
        }
    }
}

@media (width < 42.813rem) {
    & .site-main {
        section.block {
            & .content {
                & .is-layout-constrained {
                    > *:not(.wp-block-separator) {
                        margin-left: 1.25rem !important;
                        margin-right: 1.25rem !important;
                    }
                }
            }
        }
    }
}

@media (width >= 1024px) {
    .single-format-video,
    .single-format-image {
        & .site-main {
            & :is(.format-image,.format-video) {
                & section.block {
                    & .content {
                        & .is-layout-constrained {
                            & .wp-block-video video,
                            & .attachment-full.size-full.wp-post-image {
                                width: min(100% - 2.5rem, 40.313rem) !important
                            }
                        }
                    }
                }
            }
        }
    }
}

body.is-chromium {
    .site-main {
        section.block {
            & .content {
                & .is-layout-constrained {
                    & .wp-block-video video,
                    & .attachment-full.size-full.wp-post-image {
                        border-radius: 2rem;
                        corner-shape: squircle;
                    }

                    & .wp-block-image.alignwide.size-large {
                        max-width: 1024px;
                    }

                    & .wp-block-image {
                        img {
                            border-radius: 2rem;
                            corner-shape: squircle;
                        }
                    }
                }
            }
        }
    }
}

:root :where(.wp-block-separator) {
    color: light-dark(var(--wp--preset--color--accent-7), var(--wp--preset--color--accent-7));
}

/* DETRÁS DEL ESPEJO */
.single-detras-del-espejo {
    & .site-main {
        & .single-post {
            & .block:has(.content.content-comments) {
                background-color: light-dark(var(--wp--preset--color--secondary), var(--secondary-dark));
            }
        }
    }
}