@layer components {
    popular-items {
        display: block;

        > header {
            margin-bottom: var(--size-4);
            text-align: var(--alignment, start);
        }

        > nav {

            display: grid;

            & ul {
                display: grid;
                list-style-type: none;
                padding: 0 0 var(--size-4) 0;
                margin: 0 auto;
                max-width: 1240px;
                width: 100%;
                grid-template-columns: repeat(5, minmax(140px, 1fr));
                gap: 1rem;
                grid-template-rows: repeat(auto-fill, max-content);

                :is(picture, img, missing-image) {
                    display: block;
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }

                :is(a) {
                    text-decoration: none;
                    color: var(--color-dark);
                }

                figure, .figure {
                    margin: 0;
                    gap: var(--size-1);
                    display: grid;
                    grid-template-areas: "image" "caption";
                    grid-template-rows: 1fr max-content;
                    grid-template-columns: min-content;
                    justify-items: center;
                    align-items: center;
                }

                .circle {
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    grid-area: image;
                    padding: var(--size-7);

                    width: 140px;
                    height: 140px;

                    border-radius: var(--radius-round);
                    background-color: var(--item_background_color, var(--color-light-grey));
                }

                figcaption {
                    grid-area: caption;
                    text-align: center;
                    color: var(--color-blue);
                }

                & .text {

                    display: grid;
                    gap: var(--size-1);
                    text-align: center;

                    & .circle {
                        background-color: var(--item_background_color, --color-brand-yellow);
                        font-weight: var(--font-weight-5);
                        font-size: var(--font-size-4);
                    }

                    & .caption {
                        text-align: center;
                        color: var(--color-blue);
                    }
                }

                /* tablet and up */
                @media screen and (min-width: 768px) {
                    grid-template-columns: repeat(5, minmax(160px, 1fr));

                    :is(figure, .figure) {
                        > div {
                            width: 160px;
                            height: 160px;
                        }
                    }

                    & .circle {
                        width: 160px;
                        height: 160px;
                    }
                }

                /* desktop (plus some) and up */
                @media screen and (min-width: 996px) {
                    grid-template-columns: repeat(5, minmax(180px, 1fr));

                    :is(figure, .figure) {
                        > div {
                            width: 180px;
                            height: 180px;

                            :is(picture, img, missing-image) {
                                width: 120px;
                                height: 120px;
                            }
                        }
                    }

                    & .circle {
                        width: 180px;
                        height: 180px;
                    }
                }
            }

            &.one-row {
                & ul {
                    max-width: unset;
                    display: flex;
                    justify-content: space-around;
                    padding: var(--size-6) clamp(1rem, 2.4vw, 5rem);
                    gap: clamp(1rem, 2.4vw, 5rem);

                    > li {
                        &:first-child {
                            margin-left: auto;
                        }
                        &:last-child {
                            margin-right: auto;
                        }
                    }

                    /* desktop and up */
                    @media screen and (min-width: 1200px) {
                        gap: clamp(3.2rem, 4vw, 3.45rem);
                    }
                }
            }
        }
    }
}