.is-layout-constrained {
    figure.wp-block-gallery {
        opacity: 0;
    }

    .post-gallery-wrapper {
        margin: 2rem auto;
        position: relative;
        overflow: hidden;
        background-color: light-dark(var(--wp--preset--color--secondary), var(--secondary-dark));
        border-radius: 1rem;
        opacity: 0;
        transform: translateY(60px);
        box-shadow: inset 0 0 7px var(--wp--preset--color--main-alpha-10);
        animation: post-gallery-entrance .3s ease forwards;

        & .total-images {
            position: absolute;
            top: 1rem;
            right: 1rem;
            display: flex;
            align-items: center;
            gap: .5rem;
            z-index: 1;
        }

        & .post-gallery {
            display: flex;
            border-radius: inherit;

            & .post-gallery-slide {
                flex-shrink: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 1rem;
                padding: .3rem;

                & img {
                    width: 100%;
                    aspect-ratio: 3 / 2;
                    object-fit: cover;
                    display: block;
                    border-radius: .7rem;
                    box-shadow: 0 0 7px var(--wp--preset--color--main-alpha-10);
                }
            }
        }

        & .post-gallery-thumbs-container {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0 .3rem;
            padding-bottom: .3rem;
            justify-content: space-between;
            overflow: hidden;

            & .post-gallery-thumbs {
                list-style: none;
                margin: 0;
                padding: .5rem 0;
                opacity: 0;
                animation: post-gallery-entrance .3s ease .3s forwards;

                & .post-gallery-thumb {
                    border: 1px solid transparent;
                    border-radius: .5rem;
                    transition: border-color .3s ease, box-shadow .3s ease;

                    &.active {
                        & img {
                            border-color: light-dark(var(--wp--preset--color--main), var(--wp--preset--color--main));
                            box-shadow: 0 0 0 1px var(--wp--preset--color--main),
                                0 0 0 .2rem var(--main-light);
                        }
                    }

                    & img {
                        border-radius: inherit;
                        width: 100%;
                        height: calc(46px - .4rem);
                        object-fit: cover;
                        opacity: .5;
                        transition: opacity .3s ease;
                    }

                    &.active {
                        & img {
                            opacity: 1;
                        }
                    }

                    &:not(.active):hover {
                        & img {
                            border-color: light-dark(var(--wp--preset--color--main), var(--wp--preset--color--main));
                            box-shadow: 0 0 0 1px var(--wp--preset--color--main),
                                0 0 0 .2rem var(--main-light);
                            opacity: .75;
                        }
                    }
                }
            }

            & .btn-pagination {
                border-radius: 1.7rem;
            }
        }
    }
}

.pg-lightbox {
    & .pg-lightbox-img {
        border-radius: 1rem;
    }
}

body.is-chromium {
    & .is-layout-constrained {
        & .post-gallery-wrapper {
            border-radius: 2rem;
            corner-shape: squircle;

            & .post-gallery {
                & .post-gallery-slide {
                    border-radius: 2rem;
                    corner-shape: squircle;

                    & img  {
                        border-radius: 1.7rem;
                        corner-shape: squircle;
                    }
                }
            }

            & .post-gallery-thumbs-container {
                & .post-gallery-thumbs {
                    & .post-gallery-thumb {
                        border-radius: 1rem;
                        corner-shape: squircle;

                        & img {
                            corner-shape: inherit;
                        }
                    }
                }
            }
        }
    }

    .pg-lightbox {
        & .pg-lightbox-img {
            border-radius: 2rem;
            corner-shape: squircle;
        }
    }
}

@keyframes post-gallery-entrance {
    from {
        opacity: 0;
        transform: translateY(60px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}