:root {
	--grid-item-min-width: 15ch;
	--wrapper-max-width: min(100% - 1rem, 90rem);
	--grid-gap: var(--size-4);
}

.row {
	display: grid;
	grid-gap: var(--size-3);
	grid-auto-flow: column;
}

.grid {
	display: grid;
	gap: var(--grid-gap);
}

.grid[data-columns="responsive"] {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-item-min-width)), 1fr));
}

.grid[data-columns="2"] {
	grid-template-columns: 1fr 1fr;
	grid-auto-flow: initial;
}

.grid[data-columns="3"] {
	grid-template-columns: 1fr 1fr 1fr;
	grid-auto-flow: initial;
}

.grid-auto-column {
	display: grid;
	grid-auto-flow: column;
}

.grid-column-full-row {
	grid-column: 1 / -1;
}

.wrapper {
	max-width: var(--wrapper-max-width);
	margin-inline: auto;
}

.wrapper-small {
	max-width: min(100% - 1rem, 30rem);
	margin-inline: auto;
}

.text-left {
	text-align: left;
}

.text-center {
	text-align: center;
}

.text-right {
	text-align: right;
}

.w-full {
	width: 100%;
}

.hidden {
	display: none;
}

.font-bold {
	font-weight: 700;
}

.flex {
	display: flex;
}

.gap-1 {
	gap: var(--size-1);
}

.block {
	display: block;
}

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

.whitespace-nowrap {
	white-space: nowrap;
}

.text-smaller {
	font-size: smaller;
}

.strike {
	text-decoration: line-through;
}

.absolute {
	position: absolute;
}

.relative {
	position: relative;
}

.static {
	position: static;
}

.margin-auto {
	margin: auto;
}

.center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.py-1 {
	padding-block: 0.25rem;
}

.py-2 {
	padding-block: 0.5rem;
}

.py-3 {
	padding-block: 1rem;
}