.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

.flex-column {
    flex-direction: column;
}

.no-wrap {
    flex-wrap: nowrap;
}

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

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

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

.y-center {
    align-items: center;
}

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

.x-center {
    justify-content: center;
}

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

.gap-5 {
    gap: var(--distance-5);
}

.gap-10 {
    gap: var(--distance-10);
}

.gap-15 {
    gap: var(--distance-15);
}

.gap-20 {
    gap: var(--distance-20);
}

.gap-25 {
    gap: var(--distance-25);
}

.gap-30 {
    gap: var(--distance-30);
}

.gap-40 {
    gap: var(--distance-40);
}

.gap-50 {
    gap: var(--distance-50);
}

@media print, screen and (min-width: 1024px) {
    .large-gap-5 {
        gap: var(--distance-5);
    }
    
    .large-gap-10 {
        gap: var(--distance-10);
    }
    
    .large-gap-15 {
        gap: var(--distance-15);
    }
    
    .large-gap-20 {
        gap: var(--distance-20);
    }
    
    .large-gap-25 {
        gap: var(--distance-25);
    }
    
    .large-gap-30 {
        gap: var(--distance-30);
    }
    
    .large-gap-40 {
        gap: var(--distance-40);
    }
    
    .large-gap-50 {
        gap: var(--distance-50);
    }
}


@media print, screen and (max-width: 1023px) {
    .small-gap-5 {
        gap: var(--distance-5);
    }
    
    .small-gap-10 {
        gap: var(--distance-10);
    }
    
    .small-gap-15 {
        gap: var(--distance-15);
    }
    
    .small-gap-20 {
        gap: var(--distance-20);
    }
    
    .small-gap-25 {
        gap: var(--distance-25);
    }
    
    .small-gap-30 {
        gap: var(--distance-30);
    }
    
    .small-gap-40 {
        gap: var(--distance-40);
    }
    
    .small-gap-50 {
        gap: var(--distance-50);
    }
    .small-flex-wrap {
        flex-wrap: wrap;
    }

}