/* Display */
.block {display: block;}
.inlb {display: inline-block;}
.hidden {display: none;}

/* Position */
.pos-rel {position: relative;}

/* Alignment */
.txt-lef {text-align: left;}
.txt-cen {text-align: center;}
.txt-rig {text-align: right;}
.txt-jus {text-align: justify;}

.ha-cen {justify-items: center;}
.ha-rig {justify-items: right;}
.flex.ha-cen {justify-content: center;}
.flex.ha-rig {justify-content: right;}

.va-top {vertical-align: top; align-items: start;}
.va-cen {vertical-align: middle; align-items: center;}
.va-bot {vertical-align: bottom; align-items: end;}

.center-items {display: grid; place-items: center;}
.center-content {display: grid; place-content: center;}

.stack-content {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);
	place-items: center;
}

.stack-content > * {
	grid-column: 1;
	grid-row: 1;
}

/* Absolute placing */
.place-cen {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.place-cenX {position: absolute; left: 50%; transform: translateX(-50%);}
.place-cenY {position: absolute; top: 50%; transform: translateY(-50%);}

/* Images */
.bgr.pos-top {background-position: top;}
.bgr.pos-bot {background-position: bottom;}
.bgr.pos-lef {background-position: left;}
.bgr.pos-rig {background-position: right;}

/* Padding */
.pad-1 {padding: 1rem;}
.pad-2 {padding: 2rem;}
.pad-3 {padding: 3rem;}
.pad-4 {padding: 4rem;}
.pad-5 {padding: 5rem;}
.pad-6 {padding: 6rem;}
.pad-7 {padding: 7rem;}
.pad-8 {padding: 8rem;}
.pad-9 {padding: 9rem;}
.pad-10 {padding: 10rem;}

.pad-v-1 {padding-block: 1rem;}
.pad-v-2 {padding-block: 2rem;}
.pad-v-3 {padding-block: 3rem;}
.pad-v-4 {padding-block: 4rem;}
.pad-v-5 {padding-block: 5rem;}
.pad-v-6 {padding-block: 6rem;}
.pad-v-7 {padding-block: 7rem;}
.pad-v-8 {padding-block: 8rem;}
.pad-v-9 {padding-block: 9rem;}
.pad-v-10 {padding-block: 10rem;}

.pad-h-1 {padding-inline: 1rem;}
.pad-h-2 {padding-inline: 2rem;}
.pad-h-3 {padding-inline: 2rem;}
.pad-h-4 {padding-inline: 4rem;}
.pad-h-5 {padding-inline: 5rem;}
.pad-h-6 {padding-inline: 6rem;}
.pad-h-7 {padding-inline: 7rem;}
.pad-h-8 {padding-inline: 8rem;}
.pad-h-9 {padding-inline: 9rem;}
.pad-h-10 {padding-inline: 10rem;}

.pad-t-1 {padding-top: 1rem;}
.pad-t-2 {padding-top: 2rem;}
.pad-t-3 {padding-top: 3rem;}
.pad-t-4 {padding-top: 4rem;}
.pad-t-5 {padding-top: 5rem;}
.pad-t-6 {padding-top: 6rem;}
.pad-t-7 {padding-top: 7rem;}
.pad-t-8 {padding-top: 8rem;}
.pad-t-9 {padding-top: 9rem;}
.pad-t-10 {padding-top: 10rem;}

.pad-b-1 {padding-bottom: 1rem;}
.pad-b-2 {padding-bottom: 2rem;}
.pad-b-3 {padding-bottom: 3rem;}
.pad-b-4 {padding-bottom: 4rem;}
.pad-b-5 {padding-bottom: 5rem;}
.pad-b-6 {padding-bottom: 6rem;}
.pad-b-7 {padding-bottom: 7rem;}
.pad-b-8 {padding-bottom: 8rem;}
.pad-b-9 {padding-bottom: 9rem;}
.pad-b-10 {padding-bottom: 10rem;}

.pad-l-1 {padding-left: 1rem;}
.pad-l-2 {padding-left: 2rem;}
.pad-l-3 {padding-left: 3rem;}
.pad-l-4 {padding-left: 4rem;}
.pad-l-5 {padding-left: 5rem;}
.pad-l-6 {padding-left: 6rem;}
.pad-l-7 {padding-left: 7rem;}
.pad-l-8 {padding-left: 8rem;}
.pad-l-9 {padding-left: 9rem;}
.pad-l-10 {padding-left: 10rem;}

.pad-r-1 {padding-right: 1rem;}
.pad-r-2 {padding-right: 2rem;}
.pad-r-3 {padding-right: 3rem;}
.pad-r-4 {padding-right: 4rem;}
.pad-r-5 {padding-right: 5rem;}
.pad-r-6 {padding-right: 6rem;}
.pad-r-7 {padding-right: 7rem;}
.pad-r-8 {padding-right: 8rem;}
.pad-r-9 {padding-right: 9rem;}
.pad-r-10 {padding-right: 10rem;}

.pad-b-20 {padding-bottom: 20%;}
.pad-b-30 {padding-bottom: 30%;}
.pad-b-40 {padding-bottom: 40%;}
.pad-b-50 {padding-bottom: 50%;}
.pad-b-60 {padding-bottom: 60%;}
.pad-b-70 {padding-bottom: 70%;}
.pad-b-80 {padding-bottom: 80%;}
.pad-b-90 {padding-bottom: 90%;}
.pad-b-100 {padding-bottom: 100%;}

@supports not (margin-inline: 1rem) {
	.pad-h-1 {padding-left: 1rem; padding-right: 1rem;}
	.pad-h-2 {padding-left: 2rem; padding-right: 2rem;}
	.pad-h-3 {padding-left: 3rem; padding-right: 3rem;}
	.pad-h-4 {padding-left: 4rem; padding-right: 4rem;}
	.pad-h-5 {padding-left: 5rem; padding-right: 5rem;}
	.pad-h-6 {padding-left: 6rem; padding-right: 6rem;}
	.pad-h-7 {padding-left: 7rem; padding-right: 7rem;}
	.pad-h-8 {padding-left: 8rem; padding-right: 8rem;}
	.pad-h-9 {padding-left: 9rem; padding-right: 9rem;}
	.pad-h-10 {padding-left: 10rem; padding-right: 10rem;}
}

@supports not (padding-block: 1rem) {
	.pad-v-1 {padding-top: 1rem; padding-bottom: 1rem;}
	.pad-v-2 {padding-top: 2rem; padding-bottom: 2rem;}
	.pad-v-3 {padding-top: 3rem; padding-bottom: 3rem;}
	.pad-v-4 {padding-top: 4rem; padding-bottom: 4rem;}
	.pad-v-5 {padding-top: 5rem; padding-bottom: 5rem;}
	.pad-v-6 {padding-top: 6rem; padding-bottom: 6rem;}
	.pad-v-7 {padding-top: 7rem; padding-bottom: 7rem;}
	.pad-v-8 {padding-top: 8rem; padding-bottom: 8rem;}
	.pad-v-9 {padding-top: 9rem; padding-bottom: 9rem;}
	.pad-v-10 {padding-top: 10rem; padding-bottom: 10rem;}
}

/* Margins */
.mar-1 {margin: 1rem;}
.mar-2 {margin: 2rem;}
.mar-3 {margin: 3rem;}
.mar-4 {margin: 4rem;}
.mar-5 {margin: 5rem;}

.mar-h-1 {margin-inline: 1rem;}
.mar-h-2 {margin-inline: 2rem;}
.mar-h-3 {margin-inline: 3rem;}
.mar-h-4 {margin-inline: 4rem;}
.mar-h-5 {margin-inline: 5rem;}
.mar-h-auto {margin-inline: auto;}

.mar-v-1 {margin-block: 1rem;}
.mar-v-2 {margin-block: 2rem;}
.mar-v-3 {margin-block: 3rem;}
.mar-v-4 {margin-block: 4rem;}
.mar-v-5 {margin-block: 5rem;}

.mar-t-05 {margin-top: .5rem;}
.mar-t-1 {margin-top: 1rem;}
.mar-t-2 {margin-top: 2rem;}
.mar-t-3 {margin-top: 3rem;}
.mar-t-4 {margin-top: 4rem;}
.mar-t-5 {margin-top: 5rem;}
.mar-t-6 {margin-top: 6rem;}
.mar-t-7 {margin-top: 7rem;}
.mar-t-8 {margin-top: 8rem;}
.mar-t-9 {margin-top: 9rem;}
.mar-t-10 {margin-top: 10rem;}

.mar-b-05 {margin-bottom: .5rem;}
.mar-b-1 {margin-bottom: 1rem;}
.mar-b-2 {margin-bottom: 2rem;}
.mar-b-3 {margin-bottom: 3rem;}
.mar-b-4 {margin-bottom: 4rem;}
.mar-b-5 {margin-bottom: 5rem;}
.mar-b-7 {margin-bottom: 7rem;}
.mar-b-8 {margin-bottom: 8rem;}
.mar-b-9 {margin-bottom: 9rem;}
.mar-b-10 {margin-bottom: 10rem;}

.mar-l-1 {margin-left: 1rem;}
.mar-l-2 {margin-left: 2rem;}
.mar-l-3 {margin-left: 3rem;}
.mar-l-4 {margin-left: 4rem;}
.mar-l-5 {margin-left: 5rem;}

.mar-r-1 {margin-right: 1rem;}
.mar-r-2 {margin-right: 2rem;}
.mar-r-3 {margin-right: 3rem;}
.mar-r-4 {margin-right: 4rem;}
.mar-r-5 {margin-right: 5rem;}

@supports not (margin-inline: 1rem) {

	.mar-h-1 {margin-left: 1rem; margin-right: 1rem;}
	.mar-h-2 {margin-left: 2rem; margin-right: 2rem;}
	.mar-h-3 {margin-left: 3rem; margin-right: 3rem;}
	.mar-h-4 {margin-left: 4rem; margin-right: 4rem;}
	.mar-h-5 {margin-left: 5rem; margin-right: 5rem;}
	.mar-h-auto {margin-left: auto; margin-right: auto;}

}

@supports not (margin-block: 1rem) {

	.mar-v-1 {margin-top: 1rem; margin-bottom: 1rem;}
	.mar-v-2 {margin-top: 2rem; margin-bottom: 2rem;}
	.mar-v-3 {margin-top: 3rem; margin-bottom: 3rem;}
	.mar-v-4 {margin-top: 4rem; margin-bottom: 4rem;}
	.mar-v-5 {margin-top: 5rem; margin-bottom: 5rem;}

}