layout.css

/**! GNU Affero General Public License v3.0. See LICENSE.md. Copyright 2023 Roy Wierer (Seda145). **/

/* fieldset firefox browser fix, seems to have a min-width set */
fieldset {
  min-width: 0;
}

* {
  box-sizing: border-box;
}
input[type=text], 
input[type=number],
input[type=submit],
input[type=file],
textarea, 
button {
	width: 100%;
}
.block {
	display: block;
}
.main-wrap {
  max-width: 1920px;
  margin: auto;
}
.container {
  padding: 15px;
}
.flex-direction-column {
  display: flex;
  flex-direction: column;
}
.flex-direction-column-reverse {
  display: flex;
  flex-direction: column-reverse;
}
.flex-direction-row {
  display: flex;
  flex-direction: row;
}
.align-items-center {
  align-items: center;
}
.flex-direction-row-reverse {
  display: flex;
  flex-direction: row-reverse;
}
.row {
  display: flex;
  /* flex: 1; */
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}
.row .col-1 {
  flex: 0 0 8.33333333%;
  max-width: 8.33333333%;
}
.row .col-2 {
  flex: 0 0 16.66666667%;
  max-width: 16.66666667%;
}
.row .col-3 {
  flex: 0 0 25%;
  max-width: 25%;
}
.row .col-4 {
  flex: 0 0 33.33333333%;
  max-width: 33.33333333%;
}
.row .col-5 {
  flex: 0 0 41.66666667%;
  max-width: 41.66666667%;
}
.row .col-6 {
  flex: 0 0 50%;
  max-width: 50%;
}
.row .col-7 {
  flex: 0 0 58.33333333%;
  max-width: 58.33333333%;
}
.row .col-8 {
  flex: 0 0 66.66666667%;
  max-width: 66.66666667%;
}
.row .col-9 {
  flex: 0 0 75%;
  max-width: 75%;
}
.row .col-10 {
  flex: 0 0 83.33333333%;
  max-width: 83.33333333%;
}
.row .col-11 {
  flex: 0 0 91.66666667%;
  max-width: 91.66666667%;
}
.row .col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}
.row [class*='col-'] {
  padding-left: 15px;
  padding-right: 15px;
}
@media only screen and (max-width: 1024px) {
  .row .col-1-l {
    flex: 0 0 8.33333333%;
    max-width: 8.33333333%;
  }
  .row .col-2-l {
    flex: 0 0 16.66666667%;
    max-width: 16.66666667%;
  }
  .row .col-3-l {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .row .col-4-l {
    flex: 0 0 33.33333333%;
    max-width: 33.33333333%;
  }
  .row .col-5-l {
    flex: 0 0 41.66666667%;
    max-width: 41.66666667%;
  }
  .row .col-6-l {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .row .col-7-l {
    flex: 0 0 58.33333333%;
    max-width: 58.33333333%;
  }
  .row .col-8-l {
    flex: 0 0 66.66666667%;
    max-width: 66.66666667%;
  }
  .row .col-9-l {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .row .col-10-l {
    flex: 0 0 83.33333333%;
    max-width: 83.33333333%;
  }
  .row .col-11-l {
    flex: 0 0 91.66666667%;
    max-width: 91.66666667%;
  }
  .row .col-12-l {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media only screen and (max-width: 768px) {
  .row .col-1-m {
    flex: 0 0 8.33333333%;
    max-width: 8.33333333%;
  }
  .row .col-2-m {
    flex: 0 0 16.66666667%;
    max-width: 16.66666667%;
  }
  .row .col-3-m {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .row .col-4-m {
    flex: 0 0 33.33333333%;
    max-width: 33.33333333%;
  }
  .row .col-5-m {
    flex: 0 0 41.66666667%;
    max-width: 41.66666667%;
  }
  .row .col-6-m {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .row .col-7-m {
    flex: 0 0 58.33333333%;
    max-width: 58.33333333%;
  }
  .row .col-8-m {
    flex: 0 0 66.66666667%;
    max-width: 66.66666667%;
  }
  .row .col-9-m {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .row .col-10-m {
    flex: 0 0 83.33333333%;
    max-width: 83.33333333%;
  }
  .row .col-11-m {
    flex: 0 0 91.66666667%;
    max-width: 91.66666667%;
  }
  .row .col-12-m {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media only screen and (max-width: 600px) {
  .row .col-1-s {
    flex: 0 0 8.33333333%;
    max-width: 8.33333333%;
  }
  .row .col-2-s {
    flex: 0 0 16.66666667%;
    max-width: 16.66666667%;
  }
  .row .col-3-s {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .row .col-4-s {
    flex: 0 0 33.33333333%;
    max-width: 33.33333333%;
  }
  .row .col-5-s {
    flex: 0 0 41.66666667%;
    max-width: 41.66666667%;
  }
  .row .col-6-s {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .row .col-7-s {
    flex: 0 0 58.33333333%;
    max-width: 58.33333333%;
  }
  .row .col-8-s {
    flex: 0 0 66.66666667%;
    max-width: 66.66666667%;
  }
  .row .col-9-s {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .row .col-10-s {
    flex: 0 0 83.33333333%;
    max-width: 83.33333333%;
  }
  .row .col-11-s {
    flex: 0 0 91.66666667%;
    max-width: 91.66666667%;
  }
  .row .col-12-s {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media only screen and (max-width: 1359px) {
  .row .col-1-mob {
    flex: 0 0 8.33333333%;
    max-width: 8.33333333%;
  }
  .row .col-2-mob {
    flex: 0 0 16.66666667%;
    max-width: 16.66666667%;
  }
  .row .col-3-mob {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .row .col-4-mob {
    flex: 0 0 33.33333333%;
    max-width: 33.33333333%;
  }
  .row .col-5-mob {
    flex: 0 0 41.66666667%;
    max-width: 41.66666667%;
  }
  .row .col-6-mob {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .row .col-7-mob {
    flex: 0 0 58.33333333%;
    max-width: 58.33333333%;
  }
  .row .col-8-mob {
    flex: 0 0 66.66666667%;
    max-width: 66.66666667%;
  }
  .row .col-9-mob {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .row .col-10-mob {
    flex: 0 0 83.33333333%;
    max-width: 83.33333333%;
  }
  .row .col-11-mob {
    flex: 0 0 91.66666667%;
    max-width: 91.66666667%;
  }
  .row .col-12-mob {
    flex: 0 0 100%;
    max-width: 100%;
  }
}