/* # Overrides */

:root {
	--primer-color-accent: 3, 255, 219;
	--color-accent: rgb(var(--primer-color-accent));
	--hue-accent: 90deg;

	--primer-color-reflect: 220, 26, 0;
	--primer-color-vegvisir: 0, 128, 255;
}

vv-shell {
	display: flex;
	flex-direction: column;
	gap: var(--padding);
	width: 100%;
	max-width: 1200px;
	overflow-x: initial;
}

/* # Sections */

/* ## Hero */

section.hero {
	--color-accent: rgb(255, 255, 255);

	display: grid;
	gap: var(--padding);
	grid-template-columns: repeat(1, 1fr);
}

section.hero .item {
	width: 100%;
	position: relative;
	border-radius: 6px;
}

section.hero .wrapper {
	gap: var(--padding);
	z-index: 1;
	height: 100%;
	display: flex;
	position: relative;
	align-items: baseline;
	flex-direction: column;
	padding: calc(var(--padding) * 1.5);
}

section.hero .item .title {
	display: grid;
	align-items: center;
	gap: var(--padding);
	grid-template-columns: 40px 1fr;
}

section.hero .item .title svg {
	height: 3em;
	border-radius: 4px;
}

section.hero .actions {
	margin-top: auto;
}

/* ### Vegivisr */

section.hero .item.vegvisir {
	--primer-color-accent: var(--primer-color-vegvisir);
	--color-accent: rgb(var(--primer-color-vegvisir));

	color: var(--color-vegvisir);
	background-color: rgba(var(--primer-color-vegvisir), .1);
}

/* ### Reflect */

section.hero .item.reflect {
	--primer-color-accent: var(--primer-color-reflect);
	--color-accent: rgb(var(--primer-color-reflect));

	color: var(--color-reflect);
	background-color: rgba(var(--primer-color-reflect), .2);
}

/* ## Heading */

section.heading {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

section.heading svg {
	height: 2em;
}

/* ## Featured */

section.featured {
	display: grid;
	gap: var(--padding);
	grid-template-columns: repeat(1, 1fr);
}

section.featured featured-item {
	display: flex;
	fill: white;
	color: white;
	border-radius: 8px;
	align-items: baseline;
	flex-direction: column;
	padding: var(--padding);
	background-color: rgba(255, 255, 255, .1);
}

section.featured featured-item .title {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: calc(var(--padding) / 2);
}

section.featured featured-item .title svg {
	height: 2em;
	fill: var(--color-accent);
}

section.featured featured-item img {
	width: 100%;
	border-radius: 4px;
}

section.featured featured-item .actions {
	gap: var(--padding);
	width: 100%;
	display: flex;
	flex-direction: column;
	padding-top: var(--padding);
	margin-top: auto;
}

/* # Size queries */

@media (min-width: 400px) {
	section.featured featured-item .actions {
		flex-direction: row;
	}
}

@media (min-width: 600px) {
	section.hero {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	section.featured {
		grid-template-columns: repeat(3, 1fr);
	}

	section.featured featured-item .actions button.collapse p {
		display: none;
	}
}