.columns {
    width:100%;
    display: grid;
}

/* Spaltenset gleichmäßig */
.large-col-1, .medium-col-1, .small-col-1 {
    grid-template-columns: repeat(1, 1fr);
}
.large-col-2, .medium-col-2, .small-col-2 {
    grid-template-columns: repeat(2, 1fr);
}
.large-col-3, .medium-col-3, .small-col-3 {
    grid-template-columns: repeat(3, 1fr);
}
.large-col-4, .medium-col-4, .small-col-4 {
    grid-template-columns: repeat(4, 1fr);
}
.large-col-5, .medium-col-5 {
    grid-template-columns: repeat(5, 1fr);
}
.large-col-6, .medium-col-6 {
    grid-template-columns: repeat(6, 1fr);
}
/* Spaltenset gemischt 4 Spalten */
.large-col-2-1-1, .medium-col-2-1-1 {
    grid-template-columns: 2fr 1fr 1fr;
}
.large-col-1-2-1, .medium-col-1-2-1 {
    grid-template-columns: 1fr 2fr 1fr;
}
.large-col-1-1-2, .medium-col-1-1-2 {
    grid-template-columns: 1fr 1fr 2fr;
}
/* Spaltenset gemischt 3 Spalten */
.large-col-4-3-3 {
    grid-template-columns: 4fr 3fr 3fr;
}
.large-col-3-4-3 {
    grid-template-columns: 3fr 4fr 3fr;
}
.large-col-3-3-4 {
    grid-template-columns: 3fr 3fr 4fr;
}
/* Spaltenset gemischt 3 Spalten */
.large-col-2-4-4, .medium-col-2-4-4, .small-col-2-4-4 {
    grid-template-columns: 2fr 4fr 4fr;
}
.large-col-4-2-4, .medium-col-4-2-4, .small-col-4-2-4 {
    grid-template-columns: 4fr 2fr 4fr;
}
.large-col-4-4-2, .medium-col-4-4-2, .small-col-4-4-2 {
    grid-template-columns: 4fr 4fr 2fr;
}

/* Spaltenset gemischt 2 Spalten */
.large-col-60-40 {
    grid-template-columns: 6fr 4fr;
}
.large-col-40-60 {
    grid-template-columns: 4fr 6fr;
}

.large-col-66-33, .medium-col-66-33, .small-col-66-33 {
    grid-template-columns: 2fr 1fr;
}
.large-col-33-66, .medium-col-33-66, .small-col-33-66 {
    grid-template-columns: 1fr 2fr;
}

.large-col-70-30 {
    grid-template-columns: 7fr 3fr;
}
.large-col-30-70 {
    grid-template-columns: 3fr 7fr;
}

.large-col-75-25, .medium-col-75-25, .small-col-75-25 {
    grid-template-columns: 3fr 1fr;
}
.large-col-25-75, .medium-col-25-75, .small-col-25-75 {
    grid-template-columns: 1fr 3fr;
}
.large-col-80-20 {
    grid-template-columns: 8fr 2fr;
}
.large-col-20-80 {
    grid-template-columns: 2fr 8fr;
}

/* Spalten */
.column {
    border: 0 solid transparent;
    display: flex;
    flex-direction: column;
    /*overflow: hidden;*/
}

.colSubGrid .column {
    display: grid;
    grid-template-rows: subgrid; 
 }
 .colFlex .column {
     display: flex;
  }

  .columns.hAlignCenter > div,
  .columns.hAlignRight > div,
  .columns.hAlignLeft > div,
  .columns.vAlignMiddle > div,
  .columns.vAlignBottom > div,
  .columns.vAlignTop > div {
    display: flex;
    flex-direction: column;
  }
 
  .columns.hAlignCenter > div,
  .hAlignCenter .column,
  .column.hAlignCenter {
    align-items: center;
    text-align: center;
 }

 .columns.hAlignRight > div,
 .hAlignRight .column,
 .column.hAlignRight {
    align-items: flex-end;
    text-align: right;
 }

 .columns.hAlignLeft > div,
 .hAlignLeft .column,
 .column.hAlignLeft {
    align-items: flex-start;
 }
 
 .columns.vAlignMiddle > div,
 .vAlignMiddle .column,
 .column.vAlignMiddle {
     justify-content: center;
 }

 .columns.vAlignBottom > div,
 .vAlignBottom .column,
 .column.vAlignBottom {
    justify-content: flex-end;
 }

 .columns.vAlignTop > div,
 .vAlignTop .column,
 .column.vAlignTop {
    justify-content: flex-start;
  }

  @media screen and (max-width:1097px) {

    .medium-col-66-33, .small-col-66-33 {
        grid-template-columns: 2fr 1fr !important;
    }
    .medium-col-1, .small-col-1 {
        grid-template-columns: 1fr !important;
    }
    .medium-col-2, .small-col-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }


  }

  @media screen and (max-width:897px) {

  }

  @media screen and (max-width:785px) {
    .small-col-1 {
        grid-template-columns: 1fr !important;
    }

  }