/* =====================================================================
   OWL :: Mink-Grid (handgeschriebene CSS-Entsprechung der Mink g-row /
   g-row__col Klassen-API, Werte aus mink/0-settings/_mk-variables.scss)
   16 Spalten, Breakpoints xs/sm/md/lg/xl, horizontales Gutter via
   Margin/Padding-Technik, vertikales Gutter via row-gap.
   ===================================================================== */

.g-row {
    display: flex;
    flex-wrap: wrap;
    row-gap: 2rem;
    margin-left: -1rem;
    margin-right: -1rem;
}

.g-row--no-row-gutter { row-gap: 0; }
.g-row--none, .g-row--no-gutter, .g-row--16 { margin-left: 0; margin-right: 0; }
.g-row--reversed { flex-direction: row-reverse; }
.g-row--left { justify-content: flex-start; }
.g-row--centered { justify-content: center; }
.g-row--right { justify-content: flex-end; }
.g-row--around { justify-content: space-around; }
.g-row--between { justify-content: space-between; }
.g-row--top { align-items: flex-start; }
.g-row--middle { align-items: center; }
.g-row--bottom { align-items: flex-end; }
.g-row--no-wrap { flex-wrap: nowrap; }

.g-row > *,
.g-row__col {
    box-sizing: border-box;
    padding-left: 1rem;
    padding-right: 1rem;
    min-width: 0;
}

.g-row--none > *, .g-row--no-gutter > * {
    padding-left: 0;
    padding-right: 0;
}

/* Basis-Spaltenbreiten (mobile-first Default, ohne Breakpoint) */
.g-row__col--none { flex: 0 0 auto; width: auto; }
.g-row__col--auto { flex: 1 1 auto; width: auto; }
.g-row__col--equal { flex: 1 1 0%; width: auto; max-width: 100%; }
.g-row__col--1 { flex: 0 0 6.25%; width: 6.25%; }
.g-row__col--2 { flex: 0 0 12.5%; width: 12.5%; }
.g-row__col--3 { flex: 0 0 18.75%; width: 18.75%; }
.g-row__col--4 { flex: 0 0 25%; width: 25%; }
.g-row__col--5 { flex: 0 0 31.25%; width: 31.25%; }
.g-row__col--6 { flex: 0 0 37.5%; width: 37.5%; }
.g-row__col--7 { flex: 0 0 43.75%; width: 43.75%; }
.g-row__col--8 { flex: 0 0 50%; width: 50%; }
.g-row__col--9 { flex: 0 0 56.25%; width: 56.25%; }
.g-row__col--10 { flex: 0 0 62.5%; width: 62.5%; }
.g-row__col--11 { flex: 0 0 68.75%; width: 68.75%; }
.g-row__col--12 { flex: 0 0 75%; width: 75%; }
.g-row__col--13 { flex: 0 0 81.25%; width: 81.25%; }
.g-row__col--14 { flex: 0 0 87.5%; width: 87.5%; }
.g-row__col--15 { flex: 0 0 93.75%; width: 93.75%; }
.g-row__col--16 { flex: 0 0 100%; width: 100%; }

@media only screen and (min-width: 30em) {
    /* Breakpoint @xs (30em) */
        .g-row__col\@xs--none { flex: 0 0 auto; width: auto; }
        .g-row__col\@xs--auto { flex: 1 1 auto; width: auto; }
        .g-row__col\@xs--equal { flex: 1 1 0%; width: auto; max-width: 100%; }
        .g-row__col\@xs--1 { flex: 0 0 6.25%; width: 6.25%; }
        .g-row__col\@xs--2 { flex: 0 0 12.5%; width: 12.5%; }
        .g-row__col\@xs--3 { flex: 0 0 18.75%; width: 18.75%; }
        .g-row__col\@xs--4 { flex: 0 0 25%; width: 25%; }
        .g-row__col\@xs--5 { flex: 0 0 31.25%; width: 31.25%; }
        .g-row__col\@xs--6 { flex: 0 0 37.5%; width: 37.5%; }
        .g-row__col\@xs--7 { flex: 0 0 43.75%; width: 43.75%; }
        .g-row__col\@xs--8 { flex: 0 0 50%; width: 50%; }
        .g-row__col\@xs--9 { flex: 0 0 56.25%; width: 56.25%; }
        .g-row__col\@xs--10 { flex: 0 0 62.5%; width: 62.5%; }
        .g-row__col\@xs--11 { flex: 0 0 68.75%; width: 68.75%; }
        .g-row__col\@xs--12 { flex: 0 0 75%; width: 75%; }
        .g-row__col\@xs--13 { flex: 0 0 81.25%; width: 81.25%; }
        .g-row__col\@xs--14 { flex: 0 0 87.5%; width: 87.5%; }
        .g-row__col\@xs--15 { flex: 0 0 93.75%; width: 93.75%; }
        .g-row__col\@xs--16 { flex: 0 0 100%; width: 100%; }
    .g-row__col\@xs--first { order: -1; }
    .g-row__col\@xs--last { order: 1; }
}

@media only screen and (min-width: 48em) {
    /* Breakpoint @sm (48em) */
        .g-row__col\@sm--none { flex: 0 0 auto; width: auto; }
        .g-row__col\@sm--auto { flex: 1 1 auto; width: auto; }
        .g-row__col\@sm--equal { flex: 1 1 0%; width: auto; max-width: 100%; }
        .g-row__col\@sm--1 { flex: 0 0 6.25%; width: 6.25%; }
        .g-row__col\@sm--2 { flex: 0 0 12.5%; width: 12.5%; }
        .g-row__col\@sm--3 { flex: 0 0 18.75%; width: 18.75%; }
        .g-row__col\@sm--4 { flex: 0 0 25%; width: 25%; }
        .g-row__col\@sm--5 { flex: 0 0 31.25%; width: 31.25%; }
        .g-row__col\@sm--6 { flex: 0 0 37.5%; width: 37.5%; }
        .g-row__col\@sm--7 { flex: 0 0 43.75%; width: 43.75%; }
        .g-row__col\@sm--8 { flex: 0 0 50%; width: 50%; }
        .g-row__col\@sm--9 { flex: 0 0 56.25%; width: 56.25%; }
        .g-row__col\@sm--10 { flex: 0 0 62.5%; width: 62.5%; }
        .g-row__col\@sm--11 { flex: 0 0 68.75%; width: 68.75%; }
        .g-row__col\@sm--12 { flex: 0 0 75%; width: 75%; }
        .g-row__col\@sm--13 { flex: 0 0 81.25%; width: 81.25%; }
        .g-row__col\@sm--14 { flex: 0 0 87.5%; width: 87.5%; }
        .g-row__col\@sm--15 { flex: 0 0 93.75%; width: 93.75%; }
        .g-row__col\@sm--16 { flex: 0 0 100%; width: 100%; }
    .g-row__col\@sm--first { order: -1; }
    .g-row__col\@sm--last { order: 1; }
}

@media only screen and (min-width: 62em) {
    /* Breakpoint @md (62em) */
        .g-row__col\@md--none { flex: 0 0 auto; width: auto; }
        .g-row__col\@md--auto { flex: 1 1 auto; width: auto; }
        .g-row__col\@md--equal { flex: 1 1 0%; width: auto; max-width: 100%; }
        .g-row__col\@md--1 { flex: 0 0 6.25%; width: 6.25%; }
        .g-row__col\@md--2 { flex: 0 0 12.5%; width: 12.5%; }
        .g-row__col\@md--3 { flex: 0 0 18.75%; width: 18.75%; }
        .g-row__col\@md--4 { flex: 0 0 25%; width: 25%; }
        .g-row__col\@md--5 { flex: 0 0 31.25%; width: 31.25%; }
        .g-row__col\@md--6 { flex: 0 0 37.5%; width: 37.5%; }
        .g-row__col\@md--7 { flex: 0 0 43.75%; width: 43.75%; }
        .g-row__col\@md--8 { flex: 0 0 50%; width: 50%; }
        .g-row__col\@md--9 { flex: 0 0 56.25%; width: 56.25%; }
        .g-row__col\@md--10 { flex: 0 0 62.5%; width: 62.5%; }
        .g-row__col\@md--11 { flex: 0 0 68.75%; width: 68.75%; }
        .g-row__col\@md--12 { flex: 0 0 75%; width: 75%; }
        .g-row__col\@md--13 { flex: 0 0 81.25%; width: 81.25%; }
        .g-row__col\@md--14 { flex: 0 0 87.5%; width: 87.5%; }
        .g-row__col\@md--15 { flex: 0 0 93.75%; width: 93.75%; }
        .g-row__col\@md--16 { flex: 0 0 100%; width: 100%; }
    .g-row__col\@md--first { order: -1; }
    .g-row__col\@md--last { order: 1; }
}

@media only screen and (min-width: 80em) {
    /* Breakpoint @lg (80em) */
        .g-row__col\@lg--none { flex: 0 0 auto; width: auto; }
        .g-row__col\@lg--auto { flex: 1 1 auto; width: auto; }
        .g-row__col\@lg--equal { flex: 1 1 0%; width: auto; max-width: 100%; }
        .g-row__col\@lg--1 { flex: 0 0 6.25%; width: 6.25%; }
        .g-row__col\@lg--2 { flex: 0 0 12.5%; width: 12.5%; }
        .g-row__col\@lg--3 { flex: 0 0 18.75%; width: 18.75%; }
        .g-row__col\@lg--4 { flex: 0 0 25%; width: 25%; }
        .g-row__col\@lg--5 { flex: 0 0 31.25%; width: 31.25%; }
        .g-row__col\@lg--6 { flex: 0 0 37.5%; width: 37.5%; }
        .g-row__col\@lg--7 { flex: 0 0 43.75%; width: 43.75%; }
        .g-row__col\@lg--8 { flex: 0 0 50%; width: 50%; }
        .g-row__col\@lg--9 { flex: 0 0 56.25%; width: 56.25%; }
        .g-row__col\@lg--10 { flex: 0 0 62.5%; width: 62.5%; }
        .g-row__col\@lg--11 { flex: 0 0 68.75%; width: 68.75%; }
        .g-row__col\@lg--12 { flex: 0 0 75%; width: 75%; }
        .g-row__col\@lg--13 { flex: 0 0 81.25%; width: 81.25%; }
        .g-row__col\@lg--14 { flex: 0 0 87.5%; width: 87.5%; }
        .g-row__col\@lg--15 { flex: 0 0 93.75%; width: 93.75%; }
        .g-row__col\@lg--16 { flex: 0 0 100%; width: 100%; }
    .g-row__col\@lg--first { order: -1; }
    .g-row__col\@lg--last { order: 1; }
}

@media only screen and (min-width: 120em) {
    /* Breakpoint @xl (120em) */
        .g-row__col\@xl--none { flex: 0 0 auto; width: auto; }
        .g-row__col\@xl--auto { flex: 1 1 auto; width: auto; }
        .g-row__col\@xl--equal { flex: 1 1 0%; width: auto; max-width: 100%; }
        .g-row__col\@xl--1 { flex: 0 0 6.25%; width: 6.25%; }
        .g-row__col\@xl--2 { flex: 0 0 12.5%; width: 12.5%; }
        .g-row__col\@xl--3 { flex: 0 0 18.75%; width: 18.75%; }
        .g-row__col\@xl--4 { flex: 0 0 25%; width: 25%; }
        .g-row__col\@xl--5 { flex: 0 0 31.25%; width: 31.25%; }
        .g-row__col\@xl--6 { flex: 0 0 37.5%; width: 37.5%; }
        .g-row__col\@xl--7 { flex: 0 0 43.75%; width: 43.75%; }
        .g-row__col\@xl--8 { flex: 0 0 50%; width: 50%; }
        .g-row__col\@xl--9 { flex: 0 0 56.25%; width: 56.25%; }
        .g-row__col\@xl--10 { flex: 0 0 62.5%; width: 62.5%; }
        .g-row__col\@xl--11 { flex: 0 0 68.75%; width: 68.75%; }
        .g-row__col\@xl--12 { flex: 0 0 75%; width: 75%; }
        .g-row__col\@xl--13 { flex: 0 0 81.25%; width: 81.25%; }
        .g-row__col\@xl--14 { flex: 0 0 87.5%; width: 87.5%; }
        .g-row__col\@xl--15 { flex: 0 0 93.75%; width: 93.75%; }
        .g-row__col\@xl--16 { flex: 0 0 100%; width: 100%; }
    .g-row__col\@xl--first { order: -1; }
    .g-row__col\@xl--last { order: 1; }
}

.g-row__col--first { order: -1; }
.g-row__col--last { order: 1; }

/* =====================================================================
   Display-Utilities (analog mink/7-overwrites/_mk-utilities.scss)
   ===================================================================== */

.u-display--block { display: block !important; }
.u-display--inline-block { display: inline-block !important; }
.u-display--inline { display: inline !important; }
.u-display--flex { display: flex !important; }
.u-display--none { display: none !important; }

@media only screen and (min-width: 30em) {
    .u-display\@xs--block { display: block !important; }
    .u-display\@xs--inline-block { display: inline-block !important; }
    .u-display\@xs--inline { display: inline !important; }
    .u-display\@xs--flex { display: flex !important; }
    .u-display\@xs--none { display: none !important; }
}

@media only screen and (min-width: 48em) {
    .u-display\@sm--block { display: block !important; }
    .u-display\@sm--inline-block { display: inline-block !important; }
    .u-display\@sm--inline { display: inline !important; }
    .u-display\@sm--flex { display: flex !important; }
    .u-display\@sm--none { display: none !important; }
}

@media only screen and (min-width: 62em) {
    .u-display\@md--block { display: block !important; }
    .u-display\@md--inline-block { display: inline-block !important; }
    .u-display\@md--inline { display: inline !important; }
    .u-display\@md--flex { display: flex !important; }
    .u-display\@md--none { display: none !important; }
}

@media only screen and (min-width: 80em) {
    .u-display\@lg--block { display: block !important; }
    .u-display\@lg--inline-block { display: inline-block !important; }
    .u-display\@lg--inline { display: inline !important; }
    .u-display\@lg--flex { display: flex !important; }
    .u-display\@lg--none { display: none !important; }
}

@media only screen and (min-width: 120em) {
    .u-display\@xl--block { display: block !important; }
    .u-display\@xl--inline-block { display: inline-block !important; }
    .u-display\@xl--inline { display: inline !important; }
    .u-display\@xl--flex { display: flex !important; }
    .u-display\@xl--none { display: none !important; }
}