article#web-components
{

    & instant-picture img
    {
        border-radius: 0;
        margin-block: 0;
    }

    & instant-picture
    {
        border: 1px solid #30303050;

        >p
        {
            margin-block-start: 12%;
        }
    }

    & figure
    {
        &:has(>instant-picture)
        {
            justify-content: center;
            display: flex;
        }

        & instant-picture
        {
            max-width: 320px;
            align-self: center;
            border-radius: initial;
            transform: rotate(2deg);
            font-size: 51px;
        }
    }

    @media (max-width: 360px)
    {
        & figure instant-picture
        {
            font-size: 13vw;
        }
    }

    & section.banner
    {
        display: flex;
        flex-direction: row;
        max-width: 100vw;
        overflow-x: clip;
        justify-content: center;
        margin-inline: calc(-1 * var(--article-padding-inline));
        margin-block: 2rem;

        @media (width <=1050px)
        {
            :nth-child(4)
            {
                display: none;
            }
        }

        @media (width <=910px)
        {
            :nth-child(5)
            {
                display: none;
            }
        }

        @media (width <=530px)
        {
            :nth-child(2)
            {
                display: none;
            }
        }
    }

    & section.banner instant-picture
    {
        flex: 1;
    }

    & section.banner>:nth-child(2n)
    {
        transform: rotate(5deg);
    }

    & section.banner>:nth-child(3n)
    {
        transform: rotate(-3deg);
    }

    & section.banner>:nth-child(5n)
    {
        transform: rotate(-1deg);
    }

    & section.banner>:first-child
    {
        transform: rotate(-2deg);
    }

    & section.banner>:last-child
    {
        transform: rotate(7deg);
    }
}