.mi-auto {
    margin-inline: auto;
}

.mt-1rem {
    margin-top: 1rem;
}

.mb-1rem {
    margin-bottom: 1rem;
}

.ml-1rem {
    margin-left: 1rem;
}

.container {
    margin-inline: auto;
    width: 100%;
    padding-inline: 0.5rem;
}

/* xs */
@media screen and (min-width: 320px) {
    .container {
        max-width: calc(320px - (320px * 0.05));
    }
}

/* sm */
@media screen and (min-width: 384px) {
    .container {
        max-width: calc(384px - (384px * 0.05));
    }
}

/* md */
@media screen and (min-width: 448px) {
    .container {
        max-width: calc(448px - (448px * 0.05));
    }
}

/* lg */
/*
@media screen and (min-width: 512px) {
    .container {
        max-width: calc(512px - (512px * 0.05));
    }
}
*/

/* xl */
@media screen and (min-width: 576px) {
    .container {
        max-width: calc(576px - (576px * 0.05));
    }
}

/* 2xl */
/*
@media screen and (min-width: 672px) {
    .container {
        max-width: calc(672px - (672px * 0.05));
    }
}
*/

/* 3xl */
@media screen and (min-width: 768px) {
    .container {
        max-width: calc(768px - (768px * 0.05));
    }
}

/* 4xl */
/*
@media screen and (min-width: 896px) {
    .container {
        max-width: calc(896px - (896px * 0.05));
    }
}
*/

/* 5xl */
@media screen and (min-width: 1024px) {
    .container {
        max-width: calc(1024px - (1024px * 0.05));
    }
}

/* 6xl */
/* @media screen and (min-width: 1152px) {
    .container {
        max-width: calc(1152px - (1152px * 0.05));
    }
} */

/* 7xl */
/* @media screen and (min-width: 1280px) {
    .container {
        max-width: calc(1280px - (1280px * 0.05));
    }
} */