/* 4. FLEXBOX */

/* Flex direction */
.mog-flex-dir-row,
.av-flex-dir-row > div {
    flex-direction: row;
}

/* Default */
.mog-flex-dir-rowrev,
.av-flex-dir-rowrev > div {
    flex-direction: row-reverse;
}

.mog-flex-dir-col,
.av-flex-dir-col > div {
    flex-direction: column;
}

.mog-flex-dir-colrev,
.av-flex-dir-colrev > div {
    flex-direction: column-reverse;
}


/* Flex wrap */
.mog-flex-nowrap,
.av-flex-nowrap > div {
    flex-wrap: nowrap;
}

/* Default */
.mog-flex-wrap,
.av-flex-wrap > div {
    flex-wrap: wrap;
}

.mog-flex-wraprev,
.av-flex-wraprev > div {
    flex-wrap: wrap-reverse;
}


/* Justify content */
.mog-just-end,
.av-just-end > div {
    justify-content: flex-end;
}

.mog-just-start,
.av-just-start > div {
    justify-content: flex-start;
}

/* Default */
.mog-just-center,
.av-just-center > div {
    justify-content: center;
}

.mog-just-around,
.av-just-around > div {
    justify-content: space-around;
}

.mog-just-between,
.av-just-between > div {
    justify-content: space-between;
}


/* Align items */
.mog-align-start,
.av-align-start > div {
    align-items: flex-start;
}

.mog-align-center,
.av-align-center > div {
    align-items: center;
}

.mog-align-end,
.av-align-end > div {
    align-items: flex-end;
}

.mog-align-stretch,
.av-align-stretch > div {
    align-items: stretch;
}

/* Default */
.mog-align-base,
.av-align-base > div {
    align-items: baseline;
}


/* Flex grow */
.mog-flex-nogrow,
.av-flex-nogrow > div {
    flex-grow: 0;
}

/* Default */
.mog-flex-grow,
.av-flex-grow > div {
    flex-grow: 1;
}


/* Flex shrink */
.mog-flex-noshrink,
.av-flex-noshrink > div {
    flex-shrink: 0;
}

.mog-flex-shrink,
.av-flex-shrink > div {
    flex-shrink: 1;
}

/* Default */


/* Flex basis */
.mog-flex-basis-auto,
.av-flex-basis-auto > div {
    flex-basis: auto;
}

/* Default */
.mog-flex-basis-zero,
.av-flex-basis-zero > div {
    flex-basis: 0;
}


/* Align self */
.mog-align-self-auto,
.av-align-self-auto > div {
    align-self: auto;
}

/* Default */
.mog-align-self-start,
.av-align-self-start > div {
    align-self: flex-start;
}

.mog-align-self-center,
.av-align-self-center > div {
    align-self: center;
}

.mog-align-self-end,
.av-align-self-end > div {
    align-self: flex-end;
}

.mog-align-self-stretch,
.av-align-self-stretch > div {
    align-self: stretch;
}

.mog-align-self-baseline,
.av-align-self-baseline > div {
    align-self: baseline
}








/* 5. GRID */

.mog-center {
    display: grid;
    place-items: center;
}

.mog-grid,
.av-grid > div {
    --mog-grid-gap: 1em;
    --mog-grid-cols: 3;
    --mog-grid-rows: 3;

    display: grid;
    grid-template-columns: repeat(var(--mog-grid-cols), 1fr);
    grid-template-rows: repeat(var(--mog-grid-rows), 1fr);
    gap: var(--mog-grid-gap);
}




/* 6. VIDEOS */

.mog-video-wrapper {
    max-width: 600px;
    width: 100%;
}

.mog-video-wrapper > iframe {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    box-shadow: 5px 4px 12px 0px rgba(0,0,0,0.5);
    -webkit-box-shadow: 5px 4px 12px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 5px 4px 12px 0px rgba(0,0,0,0.5);
}