.container { max-width: min(100%, calc(100% + 8rem)); }

@media screen and (max-width: 767px) {
	.container {
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: min(100%, calc(100% + 4rem));
	}
}


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

.flex { display: flex; }

.row { flex-direction: row; }
.row-reverse { flex-direction: row-reverse; }

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

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

.grow { flex-grow: 1; }
.shrink { flex-shrink: 1; }

.grid { display: grid; }

.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

.m-0 { margin: 0; }
.m-1 { margin: 1rem; }
.m-2 { margin: 2rem; }
.m-3 { margin: 3rem; }
.m-4 { margin: 4rem; }

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

.mx-0 { margin-left: 0; margin-right: 0; }
.mx-1 { margin-left: 1rem; margin-right: 1rem; }
.mx-2 { margin-left: 2rem; margin-right: 2rem; }
.mx-3 { margin-left: 3rem; margin-right: 3rem; }
.mx-4 { margin-left: 4rem; margin-right: 4rem; }

.my-0 { margin-top: 0; margin-bottom: 0; }
.my-1 { margin-top: 1rem; margin-bottom: 1rem; }
.my-2 { margin-top: 2rem; margin-bottom: 2rem; }
.my-3 { margin-top: 3rem; margin-bottom: 3rem; }
.my-4 { margin-top: 4rem; margin-bottom: 4rem; }

.p-0 { padding: 0; }
.p-1 { padding: 1rem; }
.p-2 { padding: 2rem; }
.p-3 { padding: 3rem; }
.p-4 { padding: 4rem; }

.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: 1rem; padding-right: 1rem; }
.px-2 { padding-left: 2rem; padding-right: 2rem; }
.px-3 { padding-left: 3rem; padding-right: 3rem; }
.px-4 { padding-left: 4rem; padding-right: 4rem; }

.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: 1rem; padding-bottom: 1rem; }
.py-2 { padding-top: 2rem; padding-bottom: 2rem; }
.py-3 { padding-top: 3rem; padding-bottom: 3rem; }
.py-4 { padding-top: 4rem; padding-bottom: 4rem; }

.gap-0 { gap: 0; }
.gap-05 { gap: 0.5rem; }
.gap-1 { gap: 1rem; }
.gap-15 { gap: 1.5rem; }
.gap-2 { gap: 2rem; }
.gap-25 { gap: 2.5rem; }
.gap-3 { gap: 3rem; }
.gap-35 { gap: 3.5rem; }
.gap-4 { gap: 4rem; }

.ai-start { align-items: flex-start; }
.ai-center { align-items: center; }
.ai-end { align-items: flex-end; }
.ai-stretch { align-items: stretch; }

.jc-start { justify-content: flex-start; }
.jc-center { justify-content: center; }
.jc-end { justify-content: flex-end; }
.jc-between { justify-content: space-between; }
.jc-around { justify-content: space-around; }

.ta-left { text-align: left; }
.ta-center { text-align: center; }
.ta-right { text-align: right; }

.bg-primary { background: var(--clr-primary); }
.bg-secondary { background: var(--clr-secondary); }

.bg-black { background: var(--clr-black); }
.bg-white { background: var(--clr-white); }
.bg-grey { background: var(--clr-grey); }

.txt-primary { color: var(--clr-primary); }
.txt-secondary { color: var(--clr-secondary); }

.txt-black { color: var(--clr-black); }
.txt-white { color: var(--clr-white); }
.txt-grey { color: var(--clr-grey); }

.pos-rel { position: relative; }
.pos-abs { position: absolute; }
.pos-fix { position: fixed; }