/* COL */
.col {
    display: grid;
    height: 100%;
    width: 100%;
}

.col-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--content-gap);
}

.col-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--content-gap);
}

.col-4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--content-gap);
}


/* ALIGNMENT */

.wide {
    max-width: var(--content-max-width);
    margin-left: auto;
    margin-right: auto;
}



/* INNER COL */
.inner-col {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    max-width: var(--content-max-width);
    margin-left: auto;
    margin-right: auto;
}

/* JUSTIFY */
.justify-center {
    justify-content: center;
}

.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}


/* ALIGN */
.align-center {
    align-items: center;
}

.align-start {
    align-items: flex-start;
}

.align-end {
    align-items: flex-end;
}

.align-between {
    align-items: space-between;
}

.align-around {
    align-items: space-around;
}

/* COLORS */
.color-white {
    color: var(--white);
}

.color-black {
    color: var(--black);
}

.color-1 {
    color: var(--color-1);
}

.color-2 {
    color: var(--color-2);
}

.color-3 {
    color: var(--color-3);
}


/* TEXT */
.pre {
    margin-bottom: -32px;
}