// display utilities
.d-block {
    display: block;
}

.d-flex {
    display: flex;
}

// visibility utilities
.visible {
    visibility: visible;
}
.invisible {
    visibility: hidden;
}
// text alignment utilities
.text-center {
    text-align: center;
}
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}
.text-justify {
    text-align: justify;
}


// flex direction utilities
.flex-row {
    flex-direction: row;
}
.flex-column {
    flex-direction: column;
}
.flex-wrap {
    flex-wrap: wrap;
}
.flex-nowrap {
    flex-wrap: nowrap;
}
// justify content utilities
.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 items utilities
.align-center {
    align-items: center;
}
.align-start {
    align-items: flex-start;
}
.align-end {
    align-items: flex-end;
}
.align-stretch {
    align-items: stretch;
}
.align-baseline {
    align-items: baseline;
}
// margin utilities
.m-0 {
    margin: 0;
}
.m-1 {
    margin: 10px;
}
.m-2 {
    margin: 20px;
}
.m-3 {
    margin: 30px;
}
.m-4 {
    margin: 40px;
}
.m-5 {
    margin: 50px;
}
.mt-0 {
    margin-top: 0;
}
.mt-1 {
    margin-top: 10px;
}
.mt-2 {
    margin-top: 20px;
}
.mt-3 {
    margin-top: 30px;
}
.mt-4 {
    margin-top: 40px;
}
.mt-5 {
    margin-top: 50px;
}

.mb-0 {
    margin-bottom: 0;
}
.mb-1 {
    margin-bottom: 10px;
}
.mb-2 {
    margin-bottom: 20px;
}
.mb-3 {
    margin-bottom: 30px;
}
.mb-4 {
    margin-bottom: 40px;
}

// margin left utilities
.ml-0 {
    margin-left: 0;
}
.ml-1 {
    margin-left: 10px;
}
.ml-2 {
    margin-left: 20px;
}
.ml-3 {
    margin-left: 30px;
}

// padding left utilities
.pl-0 {
    padding-left: 0;
}   
.pl-1 {
    padding-left: 10px;
}
.pl-2 {
    padding-left: 20px;
}
.pl-3 {
    padding-left: 30px;
}

// gap utilities
.gap-0 {
    gap: 0;
}
.gap-1 {
    gap: 10px;
}
.gap-2 {
    gap: 20px;
}
.gap-3 {
    gap: 30px;
}
.gap-4 {
    gap: 40px;
}
.gap-5 {
    gap: 50px;
}

// width utilities
.w-100 {
    width: 100%;
}

// max-width utilities
.max-w-1 {
    max-width: 100px;
}   
.max-w-2 {
    max-width: 200px;
}
.max-w-3 {
    max-width: 300px;
}
.max-w-4 {
    max-width: 400px;
}
.max-w-5 {
    max-width: 500px;
}
.max-w-6 {
    max-width: 600px;
}
.max-w-7 {
    max-width: 700px;
}
.max-w-8 {
    max-width: 800px;
}
.max-w-9 {
    max-width: 900px;
}
.max-w-10 {
    max-width: 1000px;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}


// grid utilities
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

// flex
.flex-1 {
    flex: 1;
}