Javier Rodriguez

Menu

FRM 01 Helpers SWS Grid

FRAMEWORK 2025-05-14

/****************************************************************************
*****************************************************************************
FRM 01 Helpers Swiss Grid Framework "SWS"
Version: 1.03.002
FRAMEWORK 2025-05-15
*****************************************************************************
****************************************************************************/

/****************************************************************************
*****************************************************************************
SWS 00 - TOTAL COLUMN COTROL  

NOTE: This sets the basis for all of the Column and media queries. 
Here we use all regular media queries pixel widths and Device Names
@ 800px & UP, MUST USE EVEN COLUMNS
*****************************************************************************
****************************************************************************/

/*---------------------------------------------------------------------------
SWS 2 COLS
---------------------------------------------------------------------------*/
/*  Mobile Default  */                      :root{ --sws-col-total: 2; }

/*---------------------------------------------------------------------------
SWS 3 COLS
---------------------------------------------------------------------------*/
/*  Mobile Large & UP */
@media screen and (min-width: 570px) {      :root{ --sws-col-total: 3; } }

/*---------------------------------------------------------------------------
SWS 4 COLS
---------------------------------------------------------------------------*/
/* Tablet & UP */
@media screen and (min-width: 800px) {      :root{ --sws-col-total: 4; } } 

/* Laptop Med  & UP */
@media screen and (min-width: 1000px) {     :root{ --sws-col-total: 4; } }

/*---------------------------------------------------------------------------
SWS 6 COLS
---------------------------------------------------------------------------*/
/* Laptop Large & UP */
@media screen and (min-width: 1300px) {     :root{ --sws-col-total: 6; } } 

/* Desktop Medium & UP */
@media screen and (min-width: 1500px) {     :root{ --sws-col-total: 6; } } 

/*---------------------------------------------------------------------------
SWS 8 COLS
---------------------------------------------------------------------------*/
/* Desktop & UP */
@media screen and (min-width: 1700px) {     :root{ --sws-col-total: 8; } } 

/*---------------------------------------------------------------------------
SWS 10 COLS
---------------------------------------------------------------------------*/
/* 2K Desktop & UP */
@media screen and (min-width: 2200px) {     :root{--sws-col-total: 10; } } 

/****************************************************************************
*****************************************************************************
SWS 01 - Media Query Reff

Once Columns are Set, Redundant Media Querries are combined
& reffered to only by their total columns & not device size.
*****************************************************************************
****************************************************************************/

/*---------------------------------------------------------------------------
Absolute Media Queries
---------------------------------------------------------------------------*/
/*  SWS 2 COLS -- MOBILE/DEFAULT */

/*  SWS 3 COLS */
@media screen and (min-width: 570px) and (max-width: 799px) { }

/*  SWS 4 COLS */
@media screen and (min-width: 800px) and (max-width: 1299px) { }

/* SWS 6 COLS */
@media screen and (min-width: 1300px) and (max-width: 1699px) { }

/* SWS 8 COLS */
@media screen and (min-width: 1700px) and (max-width: 2199px) { }

/* SWS 10 COLS */
@media screen and (min-width: 2200px) { }


/*---------------------------------------------------------------------------
Min Width Media Queries
---------------------------------------------------------------------------*/

/*  SWS 3 COLS & UP */
@media screen and (min-width: 570px) { }

/*  SWS 4 COLS & UP */
@media screen and (min-width: 800px) { }

/* SWS 6 COLS & UP */
@media screen and (min-width: 1300px) { }

/* SWS 8 COLS & UP */
@media screen and (min-width: 1700px) { }

/* SWS 10 COLS & UP */
@media screen and (min-width: 2200px) { }


/****************************************************************************
*****************************************************************************
SWS 02 - MASTER Variables & Calculations
*****************************************************************************
****************************************************************************/

:root{

    /* Gets Columns Interior Space Total Number */
    --sws-col-total-gaps:       calc( var(--sws-col-total) - 1);

    /* Grid Gap */
    --sws-gap: 1rem;

    /* SWS Wrapper Container Size */
    --sws-wrapper-edge-pad:     0.5rem;
    --sws-wrapper-edge:         calc( var(--sws-gap) + var(--sws-wrapper-edge-pad) );
    --sws-wrapper-max:          calc( 100vw - var(--sws-wrapper-edge) - var(--sws-wrapper-edge ) ) ; 
    
    /* Calculates total space taken up by the column gaps */
    --sws-gap-space-total:      calc( var(--sws-col-total-gaps) * var(--sws-gap) ); 

    /* Calculates total space left after column gaps removed */
    --sws-col-space-total:      calc( var(--sws-wrapper-max) - var(--sws-gap-space-total) ); 

        
    /* SWS Gird Container */
    --sws-gcw: var(--sws-wrapper-max); /* Default Standard Grid Container  */
    --sws-gcw-plus: var(--sws-wrapper-max);

    /* SWS Max Spans */
    --sws-spanmax_2cols: var(--sws-gcw);
    --sws-spanmax_3cols: var(--sws-gcw);
    --sws-spanmax_4cols: var(--sws-gcw);
    --sws-spanmax_5cols: var(--sws-gcw);
    --sws-spanmax_6cols: var(--sws-gcw);

    /* Column Size Default - Calculates Absolute size of one column dividing space left by number of columns set. */
    --sws-col-single:   calc( calc( var(--sws-col-space-total) / var(--sws-col-total) * 1) );
    --sws-col-half:     calc( calc( var(--sws-col-single) * .5) - calc( var(--sws-gap) * .5 ) ); 
    --sws-col-double:   var(--sws-col-single);
    --sws-col-tripple:  var(--sws-col-single);

}

    /*  --- SWS 3 COLS & UP --- */
    @media screen and (min-width: 570px) {
        :root{
            /* Column Size */
            --sws-col-double:   calc( calc( var(--sws-col-single) * 3 ) + calc( var(--sws-gap) * 2 ) );
            --sws-col-tripple:  calc( calc( var(--sws-col-single) * 3 ) + calc( var(--sws-gap) * 2 ) );
        }
    }

    /* --- SWS 4 COLS  & UP --- */
    @media screen and (min-width: 800px) {
        :root{
             /* Grid Gap For Larger Screens */
            --sws-gap: 1.5rem;
            /* SWS Wrapper Container Size Adjusted for Desktop Browsers with intruding Side Scrollbar */
            --sws-wrapper-edge-pad: 0.75rem;
            
            /* SWS Max Spans */
            --sws-spanmax_2cols: calc( calc( var(--sws-col-single) * 2 ) + calc( var(--sws-gap) * 1 ) );
            --sws-spanmax_3cols: calc( calc( var(--sws-col-single) * 3 ) + calc( var(--sws-gap) * 2 ) );
            
            /* Column Size */
            --sws-col-double:   calc( calc( var(--sws-col-single) * 2 ) + calc( var(--sws-gap) * 1 ) );
            --sws-col-tripple:  calc( calc( var(--sws-col-single) * 2 ) + calc( var(--sws-gap) * 1 ) );
        }
    }

    /* --- SWS 6 COLS  & UP --- */
    @media screen and (min-width: 1300px) {
        :root{

            /* SWS Gird Container - 1 Column Side Margins */
            --sws-gcw: calc( var(--sws-wrapper-max) - calc( var(--sws-col-single) * 2 ) -  calc( var(--sws-gap) * 2 ) );

            /* SWS Max Spans */
            --sws-spanmax_4cols: calc( calc( var(--sws-col-single) * 4 ) + calc( var(--sws-gap) * 3 ) );
            --sws-spanmax_5cols: calc( calc( var(--sws-col-single) * 5 ) + calc( var(--sws-gap) * 4 ) );

            /* Column Size */
            --sws-col-tripple:  calc( calc( var(--sws-col-single) * 3 ) + calc( var(--sws-gap) * 2 ) );
        }
    }

    /* --- SWS 8 COLS & UP --- */
    @media screen and (min-width: 1500px) {
        :root{
            /* SWS Gird Container Plus */
            --sws-gcw-plus: var(--sws-wrapper-max);
        }
    }


    /* --- SWS 8 COLS & UP --- */
    @media screen and (min-width: 1700px) {
        :root{

            /* SWS Gird Container */
            --sws-gcw: calc( var(--sws-wrapper-max) - calc( var(--sws-col-single) * 2 ) -  calc( var(--sws-gap) * 2 ) );
            --sws-gcw-plus: calc( var(--sws-wrapper-max) - calc( var(--sws-col-single) * 2 ) -  calc( var(--sws-gap) * 2 ) );
            /* SWS Max Spans */
            --sws-spanmax_6cols: calc( calc( var(--sws-col-single) * 6 ) + calc( var(--sws-gap) * 5 ) );

        }
    }

    /* --- SWS 10 COLS & UP --- */
    @media screen and (min-width: 2200px) {
        :root{
            /* SWS Gird Container - 1 Column Side Margins */
            --sws-gcw: calc( var(--sws-wrapper-max) - calc( var(--sws-col-single) * 4 ) -  calc( var(--sws-gap) * 4 ) );
        }
    }

/****************************************************************************
*****************************************************************************
SWS 03 - General Helpers
*****************************************************************************
****************************************************************************/

/*---------------------------------------------------------------------------
SWS Parent Wrapper 
---------------------------------------------------------------------------*/
.sws-wrapper, .sws-wrapper-child > * { width: 100%; max-width: var(--sws-wrapper-max) !important; margin: 0 auto !important; }

/* SWS Wrapper Pulls (Orphan CSS?)
------------------------------------------*/
@media screen and (max-width: 1299px) { 
    .sws-wrapp-pull-all-s { margin-left: calc( -1 * calc( var(--sp-base) + .75rem) ) !important; margin-right: calc( -1 * calc( var(--sp-base) + .75rem) ) !important; }
    .sws-wrapp-pull-left-s { margin-left: calc( -1 * calc( var(--sp-base) + .75rem) ) !important; }
    .sws-wrapp-pull-right-s { margin-right: calc( -1 * calc( var(--sp-base) + .75rem) ) !important; }
}
@media screen and (min-width: 1300px) { 
    .sws-wrapp-pull-left-l { margin-left: calc( -1 * calc( var(--sp-base) + .75rem) ) !important; }
    .sws-wrapp-pull-right-l { margin-right: calc( -1 * calc( var(--sp-base) + .75rem) ) !important; }
}

/*---------------------------------------------------------------------------
SWS Grid Containers - Become Full Width @ less than 6 columns
---------------------------------------------------------------------------*/
.sws-gcw, .sws-gcw-child > * { width:  var(--sws-gcw); max-width: var(--sws-wrapper-max) !important; margin: 0 auto !important; }
.sws-gcw-plus, .sws-gcw-plus-child > * { width:  var(--sws-gcw-plus); max-width: var(--sws-wrapper-max) !important; margin: 0 auto !important; }
.sws-gcw-2max, .sws-gcw-2max-child > * { width:  var(--sws-spanmax_2cols); max-width: var(--sws-wrapper-max) !important; margin: 0 auto !important; }
.sws-gcw-4max, .sws-gcw-4max-child > * { width:  var(--sws-spanmax_4cols); max-width: var(--sws-wrapper-max) !important; margin: 0 auto !important; }

/*---------------------------------------------------------------------------
SWS Grid Gaps
---------------------------------------------------------------------------*/
.sws-gap, .sws-gap-1col, .sws-gap-2col { gap: var(--sws-gap); }
.sws-row-gap { row-gap: calc( var(--sws-gap) * .5 ) !important; }

/*---------------------------------------------------------------------------
Swiss Smart Automatic CSS Grids
---------------------------------------------------------------------------*/
/* SWS Smart Grid 1 Col  */
.sws-smart, .sws-smart-child > *, ul.sws-smart { display: grid; gap: var(--sws-gap); grid-template-columns: repeat(auto-fill, var(--sws-col-single) ); }

/* SWS Smart Grid Double Col  */
.sws-smart-2x, .sws-smart2x-child > * { display: grid; gap: var(--sws-gap); grid-template-columns: repeat(auto-fill, var(--sws-col-double) ); }

/* SWS Smart Grid Tripple Col  */
.sws-smart-3x, .sws-smart3x-child > * { display: grid; gap: var(--sws-gap); grid-template-columns: repeat(auto-fill, var(--sws-col-tripple) ); }

/*---------------------------------------------------------------------------
Swiss Smart Flex Grids (Pushes Cotent left)
---------------------------------------------------------------------------*/
.sws-smart-flex-end {  display: flex; justify-content: end; gap: var(--sws-gap); flex-wrap: wrap;}
.sws-smart-flex-end > *  { flex: 0 0 var(--sws-col-single); }
.sws-smart-flex-end > .sws-spanmax-2 { flex: 0 0 var(--sws-spanmax_2cols); }
/*---------------------------------------------------------------------------
SWS Max Spans Containers
---------------------------------------------------------------------------*/
/* Swiss Max Span */
*[class*="sws-spanmax--"] { width: 100%; margin-left: 0; margin-right: auto; }
.sws-spanmax-2 { max-width: var(--sws-spanmax_2cols); }
.sws-spanmax-3 { max-width: var(--sws-spanmax_3cols); }
.sws-spanmax-4 { max-width: var(--sws-spanmax_4cols); }
.sws-spanmax-5 { max-width: var(--sws-spanmax_5cols); }
.sws-spanmax-6 { max-width: var(--sws-spanmax_6cols); }

/*---------------------------------------------------------------------------
SWS Vertical Pull Helpers
---------------------------------------------------------------------------*/

/* Desktop PLUS         --- SWS 8 COLS --- */
@media screen and (min-width: 1700px) {
    .sws8col-spb-feat { padding-bottom: var(--sp-feat); }
    .sws8col-pull-top-feat {  position: relative; margin-top: calc(var(--sp-feat) * -1); z-index: 1 }
}





/****************************************************************************
*****************************************************************************
SWS 04 - Other Hepelrs
*****************************************************************************
****************************************************************************/

/*---------------------------------------------------------------------------
SWS Show/Hide Helper
---------------------------------------------------------------------------*/

*[class*="showsws--"] { display: none; } /* Hide Until Set Total Collumns Reached */
*[class*="hidesws--"] { display: block; } /* Hide After Set Total Collumns Reached */
.showsws--2 { display: block; }
.hidesws--2 { display: none; }

    /*  SWS 3 COLS & UP */
    @media screen and (min-width: 570px) { 
        .showsws--3 { display: block; }
        .hidesws--3 { display: none; }
    }

    /*  SWS 4 COLS & UP */
    @media screen and (min-width: 800px) { 
        .showsws--4 { display: block; }
        .hidesws--4 { display: none; }
    }

    /* SWS 6 COLS & UP  */
    @media screen and (min-width: 1300px) { 
        .showsws--6 { display: block; }
        .hidesws--6 { display: none; }
    }

    /* SWS 8 COLS & UP */
    @media screen and (min-width: 1700px) { 
        .showsws--8 { display: block; }
        .hidesws--8 { display: none; }
    }

    /* SWS 10 COLS & UP */
    @media screen and (min-width: 2200px) { 
        .showsws--10 { display: block; }
        .hidesws--10 { display: none; }
    }

/*---------------------------------------------------------------------------
SWS Column Span Helpers
---------------------------------------------------------------------------*/
/* Swiss GRID Column Spans */
/*.swsc-0 { grid-column: 1 / -1; }*/
.swsc-0 { grid-column: 1 / -1; } 
    

    /*  SWS 4 COLS & UP */
    @media screen and (min-width: 800px) { 
        .swsspan0-4,
        .swsc-0-s { grid-column: 1 / -1; }
        .swsspan1-4,
        .swsc-1-s { grid-column: auto / span 1; }
        .swsspan2-4,
        .swsc-2-s { grid-column: auto / span 2; }
        .swsspan3-4,
        .swsc-3-s { grid-column: auto / span 3; }
    }

    /* SWS 6 COLS & UP */
    @media screen and (min-width: 1300px) {
        .swsspan0-6,
        .swsc-0-m { grid-column: 1 / -1; }
        .swsspan1-6,
        .swsc-1-m { grid-column: auto / span 1; }
        .swsspan2-6,
        .swsc-2-m { grid-column: auto / span 2; }
        .swsspan3-6,
        .swsc-3-m { grid-column: auto / span 3; }
        .swsspan4-6,
        .swsc-4-m { grid-column: auto / span 4; }
        .swsspan5-6,
        .swsc-5-m { grid-column: auto / span 5; }
    }

    /* SWS 8 COLS & UP */
    @media screen and (min-width: 1700px) {
        .swsspan0-8,
        .swsc-0-l { grid-column: 1 / -1; }
        .swsspan1-8,
        .swsc-1-l { grid-column: auto / span 1; }
        .swsspan2-8,
        .swsc-2-l { grid-column: auto / span 2; }
        .swsspan3-8,
        .swsc-3-l { grid-column: auto / span 3; }
        .swsspan4-8,
        .swsc-4-l { grid-column: auto / span 4; }
        .swsspan5-8,
        .swsc-5-l { grid-column: auto / span 5; }
        .swsspan6-8,
        .swsc-6-l { grid-column: auto / span 6; }
        .swsspan7-8,
        .swsc-7-l { grid-column: auto / span 7; }
    }

    /* SWS 10 COLS & UP */
    @media screen and (min-width: 2200px) { 
        .swsspan0-10 { grid-column: 1 / -1; }
        .swsspan1-10 { grid-column: auto / span 1; }
        .swsspan2-10 { grid-column: auto / span 2; }
        .swsspan3-10 { grid-column: auto / span 3; }
        .swsspan4-10 { grid-column: auto / span 4; }
        .swsspan5-10 { grid-column: auto / span 5; }
        .swsspan6-10 { grid-column: auto / span 6; }
        .swsspan7-10 { grid-column: auto / span 7; }
        .swsspan8-10 { grid-column: auto / span 8; }
        .swsspan9-10 { grid-column: auto / span 9; }
    }


/*---------------------------------------------------------------------------
SWS Sidebar Containers (1,2,3... = Col, a = Rest Space)
---------------------------------------------------------------------------*/

.sws-1a, .sws-a1, 
.sws-2a, .sws-2a-8, .sws-a2, 

.sws-as, .sws-sa,

.sws-3a, .sws-4a, 
.sws-5a



{ display: grid; grid-auto-flow: row; grid-template-areas: "sws-aside" "sws-main"; grid-auto-columns: 1fr; grid-auto-flow: row; gap: var(--sws-gap); }


.sws-1a > :first-child, .sws-2a > :first-child   { grid-area: sws-aside; }
.sws-1a > :nth-child(2), .sws-2a > :nth-child(2)  { grid-area: sws-main; }




    /* Tablet PLUS          --- SWS 4 COLS --- */
    @media screen and (min-width: 800px) and (max-width: 1299px) {
        .sws-a1 { grid-template-areas: "sws-aside sws-main"; grid-template-columns: auto var(--sws-col-single); grid-auto-flow: column; }
        .sws-a1.solidside { grid-template-areas: "sws-aside sws-main"; grid-template-columns: auto calc( var(--sws-col-single) + var(--sws-gap) ); grid-auto-flow: column; }

        .sws-as { grid-template-areas: "sws-aside sws-main"; grid-template-columns: auto var(--sws-col-single); grid-auto-flow: column; }
        .sws-as.solidside { grid-template-areas: "sws-aside sws-main"; grid-template-columns: auto calc( var(--sws-col-single) + var(--sws-gap) ); grid-auto-flow: column; }

        .sws-sa { grid-template-areas: "sws-aside sws-main"; grid-template-columns: var(--sws-col-single) auto; grid-auto-flow: column; }
        .sws-sa.solidside { grid-template-areas: "sws-aside sws-main"; grid-template-columns: calc( var(--sws-col-single) + var(--sws-gap) ) auto; grid-auto-flow: column; }
    }

    /* Laptop Large PLUS    --- SWS 6 COL --- */
    @media screen and (min-width: 1300px) {
        
        .sws-1a { grid-template-areas: "sws-aside sws-main"; grid-template-columns: var(--sws-col-single) auto; grid-auto-flow: column; }
        .sws-2a { grid-template-areas: "sws-aside sws-main"; grid-template-columns: calc( var(--sws-col-single) + var(--sws-gap) + var(--sws-col-single) ) auto; grid-auto-flow: column; }
        .sws-a2 { grid-template-areas: "sws-aside sws-main"; grid-template-columns: auto calc( var(--sws-col-single) + var(--sws-gap) + var(--sws-col-single) ); grid-auto-flow: column; }
        .sws-3a { grid-template-areas: "sws-aside sws-main"; grid-template-columns: calc( var(--sws-col-single) + var(--sws-gap) + var(--sws-col-single) + var(--sws-gap) + var(--sws-col-single) ) auto; grid-auto-flow: column; }
        .sws-4a { grid-template-areas: "sws-aside sws-main"; grid-template-columns: calc( calc( var(--sws-col-single) * 4 ) + calc( var(--sws-gap) * 3 ) ) auto; grid-auto-flow: column; }
        .sws-5a { grid-template-areas: "sws-aside sws-main"; grid-template-columns: calc( calc( var(--sws-col-single) * 3 ) + calc( var(--sws-gap) * 2 ) ) auto; grid-auto-flow: column; }
        
        .sws-a1 { grid-template-areas: "sws-aside sws-main"; grid-template-columns: auto var(--sws-col-single); grid-auto-flow: column; }
        .sws-a1.solidside { grid-template-areas: "sws-aside sws-main"; grid-template-columns: auto calc( var(--sws-col-single) + var(--sws-gap) ); grid-auto-flow: column; }

        .sws-as { grid-template-areas: "sws-aside sws-main"; grid-template-columns: auto var(--sws-col-single); grid-auto-flow: column; }
        .sws-as.solidside { grid-template-areas: "sws-aside sws-main"; grid-template-columns: auto calc( var(--sws-col-single) + var(--sws-gap) ); grid-auto-flow: column; }

        .sws-sa { grid-template-areas: "sws-aside sws-main"; grid-template-columns: var(--sws-col-single) auto; grid-auto-flow: column; }
        .sws-sa.solidside { grid-template-areas: "sws-aside sws-main"; grid-template-columns: calc( var(--sws-col-single) + var(--sws-gap) ) auto; grid-auto-flow: column; }

        .sws-gap-1col { gap: calc( calc( var(--sws-col-single) * 1 ) + calc( var(--sws-gap) * 2 ) ); }
        .sws-gap-2col { gap: calc( calc( var(--sws-col-single) * 2 ) + calc( var(--sws-gap) * 3 ) ); }
    }

    /* Desktop PLUS         --- SWS 8 COLS --- */
    @media screen and (min-width: 1700px) {
        .sws-5a { grid-template-areas: "sws-aside sws-main"; grid-template-columns: calc( calc( var(--sws-col-single) * 5 ) + calc( var(--sws-gap) * 4 ) ) auto; grid-auto-flow: column; }

        .sws-as { grid-template-areas: "sws-aside sws-main"; grid-template-columns: auto calc( var(--sws-col-single) + var(--sws-gap) + var(--sws-col-single) ); grid-auto-flow: column; } 
        .sws-as.solidside { grid-template-areas: "sws-aside sws-main"; grid-template-columns: auto calc( var(--sws-gap) + var(--sws-col-single) + var(--sws-gap) + var(--sws-col-single) ); grid-auto-flow: column; } 

        .sws-sa { grid-template-areas: "sws-aside sws-main"; grid-template-columns: calc( var(--sws-col-single) + var(--sws-gap) + var(--sws-col-single) ) auto; grid-auto-flow: column; } 
        .sws-sa.solidside { grid-template-areas: "sws-aside sws-main"; grid-template-columns: calc( var(--sws-gap) + var(--sws-col-single) + var(--sws-gap) + var(--sws-col-single) ) auto; grid-auto-flow: column; } 

    }

    /* 2K Desktop PLUS      --- SWS 8 COLS --- */
    @media screen and (min-width: 2200px) {
        .sws-5a { grid-template-areas: "sws-aside sws-main"; grid-template-columns: calc( calc( var(--sws-col-single) * 5 ) + calc( var(--sws-gap) * 4 ) ) auto; grid-auto-flow: column; }
    }

    /*  SWS 3 COLS & UP */
    @media screen and (min-width: 570px) { }

    /*  SWS 4 COLS & UP */
    @media screen and (min-width: 800px) { }

    /* SWS 6 COLS & UP */
    @media screen and (min-width: 1300px) { 
        .sws-3a-6 { grid-template-areas: "sws-aside sws-main"; grid-template-columns: calc( calc( var(--sws-col-single) * 3 ) + calc( var(--sws-gap) * 2 ) ) auto; grid-auto-flow: column; }
    }

    /* SWS 8 COLS & UP */
    @media screen and (min-width: 1700px) { 
        .sws-2a-8 { grid-template-areas: "sws-aside sws-main"; grid-template-columns: calc( calc( var(--sws-col-single) * 2 ) + calc( var(--sws-gap) * 1 ) ) auto; grid-auto-flow: column; }
        .sws-3a-8 { grid-template-areas: "sws-aside sws-main"; grid-template-columns: calc( calc( var(--sws-col-single) * 3 ) + calc( var(--sws-gap) * 2 ) ) auto; grid-auto-flow: column; }

    }

    /* SWS 10 COLS & UP */
    @media screen and (min-width: 2200px) { 
        .sws-3a-10 { grid-template-areas: "sws-aside sws-main"; grid-template-columns: calc( calc( var(--sws-col-single) * 3 ) + calc( var(--sws-gap) * 2 ) ) auto; grid-auto-flow: column; }
        .sws-5a { grid-template-areas: "sws-aside sws-main"; grid-template-columns: calc( calc( var(--sws-col-single) * 5 ) + calc( var(--sws-gap) * 4 ) ) auto; grid-auto-flow: column; }
    }


/*---------------------------------------------------------------------------
Swiss Woocommerce Overrides
---------------------------------------------------------------------------*/
.woocommerce ul.products.sws-smart li.product, 
.woocommerce-page ul.products.sws-smart li.product 
{ float: unset; margin: unset; padding: unset; position: relative; width: unset; margin-left: unset; }