/* #####################################
	Grid e reset
	Substitui o Bootstrap: mesmas classes (container/row/col-*),
	uma fração do peso.
##################################### */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
	margin: 0;
}

ul[class],
ol[class] {
	list-style: none;
	margin: 0;
	padding: 0;
}

img,
picture,
svg,
video {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

/* ######
	Container
############ */

.container {
	width: 100%;
	max-width: calc(var(--container) + (var(--gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.container-narrow {
	max-width: calc(var(--container-narrow) + (var(--gutter) * 2));
}

.container-xl {
	max-width: calc(var(--container-wide) + (var(--gutter) * 2));
}

.container-flush {
	max-width: none;
	padding-inline: 0;
}

/* ######
	Row / colunas
############ */

.row {
	display: flex;
	flex-wrap: wrap;
	margin-inline: calc(var(--gap) / -2);
}

.row > [class*='col-'],
.row > .col {
	width: 100%;
	padding-inline: calc(var(--gap) / 2);
}

.col { flex: 1 0 0%; }

.col-1  { width: 8.3333%; }
.col-2  { width: 16.6666%; }
.col-3  { width: 25%; }
.col-4  { width: 33.3333%; }
.col-5  { width: 41.6666%; }
.col-6  { width: 50%; }
.col-7  { width: 58.3333%; }
.col-8  { width: 66.6666%; }
.col-9  { width: 75%; }
.col-10 { width: 83.3333%; }
.col-11 { width: 91.6666%; }
.col-12 { width: 100%; }

@media (min-width: 768px) {
	.col-md-1  { width: 8.3333%; }
	.col-md-2  { width: 16.6666%; }
	.col-md-3  { width: 25%; }
	.col-md-4  { width: 33.3333%; }
	.col-md-5  { width: 41.6666%; }
	.col-md-6  { width: 50%; }
	.col-md-7  { width: 58.3333%; }
	.col-md-8  { width: 66.6666%; }
	.col-md-9  { width: 75%; }
	.col-md-10 { width: 83.3333%; }
	.col-md-11 { width: 91.6666%; }
	.col-md-12 { width: 100%; }
}

@media (min-width: 1024px) {
	.col-lg-1  { width: 8.3333%; }
	.col-lg-2  { width: 16.6666%; }
	.col-lg-3  { width: 25%; }
	.col-lg-4  { width: 33.3333%; }
	.col-lg-5  { width: 41.6666%; }
	.col-lg-6  { width: 50%; }
	.col-lg-7  { width: 58.3333%; }
	.col-lg-8  { width: 66.6666%; }
	.col-lg-9  { width: 75%; }
	.col-lg-10 { width: 83.3333%; }
	.col-lg-11 { width: 91.6666%; }
	.col-lg-12 { width: 100%; }
}

/* ######
	Grade automática (usada pelos blocos)
############ */

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

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

@media (max-width: 1023px) {
	.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.grid-2,
	.grid-3,
	.grid-4 { grid-template-columns: minmax(0, 1fr); }
}

/* ######
	Utilitários mínimos
############ */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 999;
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px 20px;
	clip: auto;
	clip-path: none;
	background: var(--color-dark);
	color: #fff;
}