/* =======================================
  FLEX
======================================= */

.f-col {
    display: flex;
    flex-direction: column;
}

.f-row {
    display: flex;
    align-items: center;
}

.a-f-s {
    align-items: flex-start;
}

.j-c {
    justify-content: center;
}

.j-s-b {
    justify-content: space-between;
}

.j-f-e {
    justify-content: flex-end;
}

.flex {
    flex: 1;
}

.g100 {
    gap: var(--g100);
}

.g80 {
    gap: var(--g80);
}

.g60 {
    gap: var(--g60);
}

.g18 {
    gap: var(--g18);
}

.g16 {
    gap: var(--g16);
}

.g12 {
    gap: var(--g12);
}

.g10 {
    gap: var(--g10);
}

.g6 {
    gap: var(--g6);
}

section {
    position: relative;
}