<section
    class="{{ [
        bg_color,
        'bg-cover bg-center bg-no-repeat' => bg_image != null,
        gradient:linear,
        gradient:from,
        'from-25%' => gradient:linear != null and gradient:stop_position == '25',
        'from-33%' => gradient:linear != null and gradient:stop_position == '33',
        'from-50%' => gradient:linear != null and gradient:stop_position == '50',
        'from-66%' => gradient:linear != null and gradient:stop_position == '66',
        'from-75%' => gradient:linear != null and gradient:stop_position == '75',
        'via-inherit' => gradient:linear != null and gradient:to == 'to-inherit',
        'via-current' => gradient:linear != null and gradient:to == 'to-current',
        'via-black' => gradient:linear != null and gradient:to == 'to-black',
        'via-white' => gradient:linear != null and gradient:to == 'to-white',
        'via-primary-50' => gradient:linear != null and gradient:to == 'to-primary-50',
        'via-primary-100'=> gradient:linear != null and gradient:to == 'to-primary-100',
        'via-primary-200'=> gradient:linear != null and gradient:to == 'to-primary-200',
        'via-primary-300'=> gradient:linear != null and gradient:to == 'to-primary-300',
        'via-primary-400'=> gradient:linear != null and gradient:to == 'to-primary-400',
        'via-primary-500'=> gradient:linear != null and gradient:to == 'to-primary-500',
        'via-primary-600'=> gradient:linear != null and gradient:to == 'to-primary-600',
        'via-primary-700'=> gradient:linear != null and gradient:to == 'to-primary-700',
        'via-primary-800'=> gradient:linear != null and gradient:to == 'to-primary-800',
        'via-primary-900'=> gradient:linear != null and gradient:to == 'to-primary-900',
        'via-primary-950'=> gradient:linear != null and gradient:to == 'to-primary-950',
        'via-secondary-50' => gradient:linear != null and gradient:to == 'to-secondary-50',
        'via-secondary-100' => gradient:linear != null and gradient:to == 'to-secondary-100',
        'via-secondary-200' => gradient:linear != null and gradient:to == 'to-secondary-200',
        'via-secondary-300' => gradient:linear != null and gradient:to == 'to-secondary-300',
        'via-secondary-400' => gradient:linear != null and gradient:to == 'to-secondary-400',
        'via-secondary-500' => gradient:linear != null and gradient:to == 'to-secondary-500',
        'via-secondary-600' => gradient:linear != null and gradient:to == 'to-secondary-600',
        'via-secondary-700' => gradient:linear != null and gradient:to == 'to-secondary-700',
        'via-secondary-800' => gradient:linear != null and gradient:to == 'to-secondary-800',
        'via-secondary-900' => gradient:linear != null and gradient:to == 'to-secondary-900',
        'via-secondary-950' => gradient:linear != null and gradient:to == 'to-secondary-950',
        'via-tertiary-50'=> gradient:linear != null and gradient:to == 'to-tertiary-50',
        'via-tertiary-100' => gradient:linear != null and gradient:to == 'to-tertiary-100',
        'via-tertiary-200' => gradient:linear != null and gradient:to == 'to-tertiary-200',
        'via-tertiary-300' => gradient:linear != null and gradient:to == 'to-tertiary-300',
        'via-tertiary-400' => gradient:linear != null and gradient:to == 'to-tertiary-400',
        'via-tertiary-500' => gradient:linear != null and gradient:to == 'to-tertiary-500',
        'via-tertiary-600' => gradient:linear != null and gradient:to == 'to-tertiary-600',
        'via-tertiary-700' => gradient:linear != null and gradient:to == 'to-tertiary-700',
        'via-tertiary-800' => gradient:linear != null and gradient:to == 'to-tertiary-800',
        'via-tertiary-900' => gradient:linear != null and gradient:to == 'to-tertiary-900',
        'via-tertiary-950' => gradient:linear != null and gradient:to == 'to-tertiary-950',
        'via-quaternary-50'=> gradient:linear != null and gradient:to == 'to-quaternary-50',
        'via-quaternary-100' => gradient:linear != null and gradient:to == 'to-quaternary-100',
        'via-quaternary-200' => gradient:linear != null and gradient:to == 'to-quaternary-200',
        'via-quaternary-300' => gradient:linear != null and gradient:to == 'to-quaternary-300',
        'via-quaternary-400' => gradient:linear != null and gradient:to == 'to-quaternary-400',
        'via-quaternary-500' => gradient:linear != null and gradient:to == 'to-quaternary-500',
        'via-quaternary-600' => gradient:linear != null and gradient:to == 'to-quaternary-600',
        'via-quaternary-700' => gradient:linear != null and gradient:to == 'to-quaternary-700',
        'via-quaternary-800' => gradient:linear != null and gradient:to == 'to-quaternary-800',
        'via-quaternary-900' => gradient:linear != null and gradient:to == 'to-quaternary-900',
        'via-quaternary-950' => gradient:linear != null and gradient:to == 'to-quaternary-950',
        'via-transparent' => gradient:linear != null and gradient:to == 'to-transparent',
        'via-25%' => gradient:linear != null and gradient:stop_position == '25',
        'via-33%' => gradient:linear != null and gradient:stop_position == '33',
        'via-50%' => gradient:linear != null and gradient:stop_position == '50',
        'via-66%' => gradient:linear != null and gradient:stop_position == '66',
        'via-75%' => gradient:linear != null and gradient:stop_position == '75',
        gradient:to
        ] | classes | collapse_whitespace }}"
    {{ if bg_image }}style="background-image: url({{ glide :src='bg_image' }});"{{ /if}}
>
    {{ slot }}
</section>
