/*!*******************************
*****     COLUMN  LAYOUT     *****
*********************************/

@layer component {
  @scope ([data-component-id$=":column-layout"]) {
    /*
    :scope {
      color: contrast-color(var(--clr-bg-500));
    }
    */

    .layout {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
    } /* End of .layout */
    /* * */
    /* * */
    /* * */
    /*****************************
    *****     one-column     *****
    *****************************/
      .one-column > :nth-child(n) {
        grid-column: 1 / 13;
      } /* End of .one-column */
    /* * */
    /* * */
    /* * */
    /*********************************
    *****     two-column-1-1     *****
    *********************************/
      .two-columns-1-1 > :nth-child(2n + 1) {
        grid-column: 1 / 13;
      }

        @media (min-width: 768.02px) {
      .two-columns-1-1 > :nth-child(2n + 1) {
          grid-column: 1 / 7;
      }
        }

      .two-columns-1-1 > :nth-child(2n) {
        grid-column: 1 / 13;
      }

        @media (min-width: 768.02px) {

      .two-columns-1-1 > :nth-child(2n) {
          grid-column: 7 / 13;
      }
        } /* End of .two-columns-1-1 */
    /* * */
    /* * */
    /* * */
    /*********************************
    *****     two-column-1-2     *****
    *********************************/
      .two-columns-1-2 > :nth-child(2n + 1) {
        grid-column: 1 / 13;
      }

        @media (min-width: 420.02px) {
      .two-columns-1-2 > :nth-child(2n + 1) {
          grid-column: 1 / 13;
      }
        }

        @media (min-width: 768.02px) {
      .two-columns-1-2 > :nth-child(2n + 1) {
          grid-column: 1 / 5;
      }
        }

      .two-columns-1-2 > :nth-child(2n) {
        grid-column: 1 / 13;
      }

        @media (min-width: 420.02px) {

      .two-columns-1-2 > :nth-child(2n) {
          grid-column: 1 / 13;
      }
        }

        @media (min-width: 768.02px) {

      .two-columns-1-2 > :nth-child(2n) {
          grid-column: 5 / 13;
      }
        } /* End of .two-columns-1-2 */
    /* * */
    /* * */
    /* * */
    /*********************************
    *****     two-column-1-3     *****
    *********************************/
      .two-columns-1-3 > :nth-child(2n + 1) {
        grid-column: 1 / 13;
      }

        @media (min-width: 420.02px) {
      .two-columns-1-3 > :nth-child(2n + 1) {
          grid-column: 1 / 13;
      }
        }

        @media (min-width: 768.02px) {
      .two-columns-1-3 > :nth-child(2n + 1) {
          grid-column: 1 / 4;
      }
        }

      .two-columns-1-3 > :nth-child(2n) {
        grid-column: 1 / 13;
      }

        @media (min-width: 420.02px) {

      .two-columns-1-3 > :nth-child(2n) {
          grid-column: 1 / 13;
      }
        }

        @media (min-width: 768.02px) {

      .two-columns-1-3 > :nth-child(2n) {
          grid-column: 4 / 13;
      }
        } /* End of .two-columns-1-3 */
    /* * */
    /* * */
    /* * */
    /*********************************
    *****     two-column-2-1     *****
    *********************************/
      .two-columns-2-1 > :nth-child(2n + 1) {
        grid-column: 1 / 13;
      }

        @media (min-width: 420.02px) {
      .two-columns-2-1 > :nth-child(2n + 1) {
          grid-column: 1 / 13;
      }
        }

        @media (min-width: 768.02px) {
      .two-columns-2-1 > :nth-child(2n + 1) {
          grid-column: 1 / 9;
      }
        }

      .two-columns-2-1 > :nth-child(2n) {
        grid-column: 1 / 13;
      }

        @media (min-width: 420.02px) {

      .two-columns-2-1 > :nth-child(2n) {
          grid-column: 1 / 13;
      }
        }

        @media (min-width: 768.02px) {

      .two-columns-2-1 > :nth-child(2n) {
          grid-column: 9 / 13;
      }
        } /* End of .two-columns-2-1 */
    /* * */
    /* * */
    /* * */
    /*********************************
    *****     two-column-3-1     *****
    *********************************/
      .two-columns-3-1 > :nth-child(2n + 1) {
        grid-column: 1 / 13;
      }

        @media (min-width: 768.02px) {
      .two-columns-3-1 > :nth-child(2n + 1) {
          grid-column: 1 / 10;
      }
        }

      .two-columns-3-1 > :nth-child(2n) {
        grid-column: 1 / 13;
      }

        @media (min-width: 768.02px) {

      .two-columns-3-1 > :nth-child(2n) {
          grid-column: 10 / 13;
      }
        } /* End of .two-columns-3-1 */
    /* * */
    /* * */
    /* * */
    /**************************************
    *****     three-columns-1-1-1     *****
    **************************************/
      .three-columns-1-1-1 > :nth-child(n) {
        grid-column: 1 / 13;
      }

        @media (min-width: 768.02px) {
      .three-columns-1-1-1 > :nth-child(n) {
          grid-column: span 4;
      }
        } /* End of .three-columns-1-1-1 */
    /* * */
    /* * */
    /* * */
    /**************************************
    *****     three-columns-1-2-1     *****
    **************************************/
      .three-columns-1-2-1 > :nth-child(3n + 1) {
        grid-column: 1 / 13;
      }

        @media (min-width: 768.02px) {
      .three-columns-1-2-1 > :nth-child(3n + 1) {
          grid-column: span 3;
      }
        }

      .three-columns-1-2-1 > :nth-child(3n + 2) {
        grid-column: 1 / 13;
      }

        @media (min-width: 768.02px) {

      .three-columns-1-2-1 > :nth-child(3n + 2) {
          grid-column: span 6;
      }
        }

      .three-columns-1-2-1 > :nth-child(3n + 3) {
        grid-column: 1 / 13;
      }

        @media (min-width: 768.02px) {

      .three-columns-1-2-1 > :nth-child(3n + 3) {
          grid-column: span 3;
      }
        } /* End of .three-columns-1-2-1 */
    /* * */
    /* * */
    /* * */
    /**************************************
    *****     three-columns-2-1-1     *****
    **************************************/
      .three-columns-2-1-1 > :nth-child(3n + 1) {
        grid-column: 1 / 13;
      }

        @media (min-width: 768.02px) {
      .three-columns-2-1-1 > :nth-child(3n + 1) {
          grid-column: span 6;
      }
        }

      .three-columns-2-1-1 > :nth-child(3n + 2) {
        grid-column: 1 / 13;
      }

        @media (min-width: 768.02px) {

      .three-columns-2-1-1 > :nth-child(3n + 2) {
          grid-column: span 3;
      }
        }

      .three-columns-2-1-1 > :nth-child(3n + 3) {
        grid-column: 1 / 13;
      }

        @media (min-width: 768.02px) {

      .three-columns-2-1-1 > :nth-child(3n + 3) {
          grid-column: span 3;
      }
        } /* End of .three-columns-2-1-1 */
    /* * */
    /* * */
    /* * */
    /**************************************
    *****     three-columns-1-1-2     *****
    **************************************/
      .three-columns-1-1-2 > :nth-child(3n + 1) {
        grid-column: 1 / 13;
      }

        @media (min-width: 768.02px) {
      .three-columns-1-1-2 > :nth-child(3n + 1) {
          grid-column: span 3;
      }
        }

      .three-columns-1-1-2 > :nth-child(3n + 2) {
        grid-column: 1 / 13;
      }

        @media (min-width: 768.02px) {

      .three-columns-1-1-2 > :nth-child(3n + 2) {
          grid-column: span 3;
      }
        }

      .three-columns-1-1-2 > :nth-child(3n + 3) {
        grid-column: 1 / 13;
      }

        @media (min-width: 768.02px) {

      .three-columns-1-1-2 > :nth-child(3n + 3) {
          grid-column: span 6;
      }
        } /* End of .three-columns-1-1-2 */
    /* * */
    /* * */
    /* * */
    /***************************************
    *****     four-columns-1-1-1-1     *****
    ***************************************/
      .four-columns-1-1-1-1 > :nth-child(n) {
        grid-column: 1 / 13;
        /* 468px is not global breakpoint */
      }
        @media (min-width: 468.02px) {
      .four-columns-1-1-1-1 > :nth-child(n) {
          grid-column: span 6;
      }
        }
        @media (min-width: 1024.02px) {
      .four-columns-1-1-1-1 > :nth-child(n) {
          /*background-color: red;*/
          grid-column: span 3;
      }
        } /* End of .four-columns-1-1-1-1 */
    /* * */
    /* * */
    /* * */
    /*****************************************
    *****     five-columns-1-1-1-1-1     *****
    *****************************************/
    .five-columns-1-1-1-1-1 {
      grid-template-columns: repeat(10, minmax(0, 1fr));
    }

      .five-columns-1-1-1-1-1 > :nth-child(n) {
        grid-column: 1 / 11;
      }

        @media (min-width: 768.02px) {

      .five-columns-1-1-1-1-1 > :nth-child(n) {
          grid-column: span 2;
      }
        } /* End of .five-columns-1-1-1-1-1 */
    /* * */
    /* * */
    /* * */
    /******************************************
    *****     six-columns-1-1-1-1-1-1     *****
    *****************************************/
      .six-columns-1-1-1-1-1-1 > :nth-child(n) {
        grid-column: 1 / 13;
        /*background-color: yellow;*/
      }

        @media (min-width: 768.02px) {
      .six-columns-1-1-1-1-1-1 > :nth-child(n) {
          grid-column: span 2;
      }
        } /* End of .six-columns-1-1-1-1-1-1 */
    /* * */
    /* * */
    /* * */
  } /*! End of @scope */
} /*! End of @layer */