Filters 
{
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;

    div 
    {
        width: 256px;
        aspect-ratio: 1;
        flex-shrink: 0;
        flex-grow: 0;
        background-image: url( /content/fp.png );
        background-position: center;
        background-size: cover;

        &.drop-shadow 
        {
            filter: drop-shadow( 5px 5px 10px rgba( black, 0.5 ) );
        }

        &.drop-shadow-multiple 
        {
            filter: drop-shadow( -5px -5px 10px rgba( red, 0.5 ), 5px 5px 10px rgba( blue, 0.5 ), 5px -5px 10px rgba( yellow, 0.5 ), -5px 5px 10px rgba( green, 0.5 ) );
        }

        &.glow 
        {
            filter: drop-shadow( 0px 0px 10px rgba( red, 0.5 ) );
        }

        &.blur 
        {
            filter-blur: 5px;
        }

        &.mask 
        {
            mask-image: linear-gradient( 0%, black 0%, rgba( white, 0.9 ) 20%, white 80%, black 100% );
        }

        &.multiple-filters 
        {
            filter: blur(20px) saturate(200%) brightness(50%);
        }

        &.border 
        {
            filter: border-wrap( 5px red );
            transition: all 150ms ease;

            &.border-big 
            {
                filter: border-wrap( 10px purple );

                &:hover 
                {
                    filter: border-wrap( 20px blue );
                }
            }

            &:hover 
            {
                filter: border-wrap( 10px green );
            }
        }

        &.no-bg 
        {
            justify-content: center;
            align-items: center;
            font-weight: bolder;
            font-size: 48px;
            background-image: none;
        }
    }
}