/* used media queries

@media (max-width: 468px)  {}
@media (max-width: 768px)  {}
@media (max-width: 1024px) {}
@media (max-width: 1400px) {}
@media (max-width: 1600px) {}
*/


/* grid variables */
:root {
    /* Row Width Flex Layout */
    --row-width-extra-small:  468px;
    --row-width-small:        900px;
    --row-width:             1024px;
    --row-width-large:       1200px;
    --row-width-extra-large: 1440px;

    /* Row Spacing (vertical) */
    --row-spacing:             0px;

    /* Row outer Gutter (horizontal) */
    --row-outer-gutter:        40px;
    --row-outer-gutter-mobile: 20px;
}

section {
    padding:50px 0;
}


@media screen and (max-width: 768px) {
  section {
    padding:10px 0;
  }
}

.row {
    margin: 0 auto;
    max-width: var(--row-width);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0 var(--row-outer-gutter);
}

main .row{
    margin: var(--row-spacing) auto 0 auto;
}

@media (max-width: 468px) {
    .row { padding: 0 var(--row-outer-gutter-mobile); }
}

/* row modifiers */
.row-small       { max-width: var(--row-width-small); }
.row-extra-small { max-width: var(--row-width-extra-small); }
.row-large       { max-width: var(--row-width-large); }
.row-extra-large { max-width: var(--row-width-extra-large); }

.row-full        { max-width: 100%; }
.row-centered    { justify-content: space-around; }

/* center the row content vertically */
.row-justified > .col {
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.col {
    flex: 1;
    padding: 14px;
    padding-left: 18px;
    padding-right: 18px;
}

.col-centered { border:0px solid red; }

@media (max-width: 468px) {
    .col {
        padding-left: 0px;
        padding-right: 0px;
    }
}

/* .col modifiers */
.col-half   { flex: 0.5; }
.col-double { flex: 2; }

  .col-6 {
    flex: 5;
  }
  .col-4 {
    flex:3.3;
  }
  .col-3 {
    flex: 2.5;
  }
  .col-2 {
    flex:1.25
  }


@media (max-width: 468px) {
    /* all .cols are full-width on mobile */
    .col-double, .col-half { flex: 1; }
}

@media screen and (max-width: 768px) {
    /* what is the difference to the line above? */
    .col { flex-basis: 100%; }
}