{% set section =
  html_cva(
    base: ['relative mx-auto flex flex-col items-stretch'],
    variants: {
      width: {
        '100%': 'lg:max-w-full',
        '90%': 'lg:max-w-9/10',
        '80%': 'lg:max-w-8/10',
        '70%': 'lg:max-w-7/10',
        '60%': 'lg:max-w-6/10',
        '50%': 'lg:max-w-1/2'
      }
    }
  )
%}

{% set grid_content =
  section.apply({
    width: width|default('100%')
  })
%}

{% set grid =
  html_cva(
    base: ['grid w-full min-w-0', 'gap-4 @sm:gap-6 @3xl:gap-8'],
    variants: {
      columns: {
        '1 column': 'grid-cols-1',
        '2 columns': 'md:grid-cols-2',
        '3 columns': 'md:grid-cols-3',
        '4 columns': 'sm:grid-cols-2 lg:grid-cols-4',
        '5 columns': 'sm:grid-cols-2 lg:grid-cols-5',
        '6 columns': 'sm:grid-cols-3 lg:grid-cols-6',
        '2 columns 75%-25%': 'md:grid-cols-[minmax(0,3fr)_minmax(0,1fr)]',
        '2 columns 25%-75%': 'md:grid-cols-[minmax(0,1fr)_minmax(0,3fr)]',
        '2 columns 67%-33%': 'md:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]',
        '2 columns 33%-67%': 'md:grid-cols-[minmax(0,1fr)_minmax(0,2fr)]',
        '3 columns 50%-25%-25%': 'md:grid-cols-[minmax(0,2fr)_minmax(0,1fr)_minmax(0,1fr)]',
        '3 columns 25%-25%-50%': 'md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_minmax(0,2fr)]'
      },
      mobileColumns: {
        '1': '',
        '2': 'grid-cols-2',
        '3': 'grid-cols-3'
      }
    },
    compound_variants: [
      {
        columns: ['4 columns'],
        mobileColumns: ['2'],
        class: 'sm:grid-cols-4'
      }
    ]
  )
%}

{% set grid_classes =
  grid.apply({
    columns: columns|default('100'),
    mobileColumns: mobile_columns|default('1')
  })
%}

<section class="{{ section_classes }}">
  <div class="{{ grid_content }}">
    <div class="{{ grid_classes }}">
      {% block main_slot %}

      {% endblock %}
    </div>
  </div>
</section>
