/******************* ALL DEVICES *******************/

.margin-top {
	margin-top: 2.25rem;
}

@media (min-width: 576px) {
	.grid.grid-normal-button-width {
		display: flex;
		justify-content: center;
	}
}

/******************* ALL DEVICES - MAP GRID *******************/

/* Sets text, border, and shadow color of maps when hovered */
/* Switch between 'a' and 'p' to change between primary color or not */
[data-theme="light"] #map-grid p,
:root:not([data-theme="dark"]) #map-grid p {
	--pico-color: #373c44;
}
[data-theme="dark"] #map-grid p,
:root:not([data-theme="light"]) #map-grid p {
	--pico-color: #c2c7d0;
}

#map-grid a {
	border-radius: var(--pico-border-radius); /* Adds border radius to a */
	text-align: center;
	text-decoration: none; /* Removes default underline */
}

/******************* ALL DEVICES - HOVER EXTRUDE ANIMATION *******************/

.hover-extrude {
	border: 1px solid var(--pico-form-element-border-color);
	box-shadow: None;
	-webkit-transition:
		box-shadow 200ms ease,
		-webkit-transform 200ms ease;
	transition:
		box-shadow 200ms ease,
		transform 200ms ease;
}

/* Extrude - MD */
.hover-extrude-md:hover {
	border: 1px solid var(--pico-color);
	-webkit-transform: translate(3px, -3px);
	-moz-transform: translate(3px, -3px);
	-ms-transform: translate(3px, -3px);
	transform: translate(3px, -3px);
	box-shadow: -6px 6px 0 var(--pico-color);
}

/******************* ALL DEVICES - ICON RIGHT ANIMATION *******************/

/* Adds margin to the left of the arrow */
a .icon-arrow-right {
	vertical-align: text-bottom;
	width: auto;
	margin-left: calc(var(--pico-spacing) * 0.25);
}

/* During transition, move arrow pieces slowly */
a .icon-arrow-right path.line,
a .icon-arrow-right g.head {
	transition-duration: 0.2s;
	transition-property: transform;
	transition-timing-function: ease-in-out;
}

/* When hovered, move the line of the arrow to the right and scale it */
a .icon-arrow-right path.line {
	transform: translate(0) scaleX(0);
	transform-origin: 14px;
}
a:hover .icon-arrow-right path.line {
	transform: translate(5px) scaleX(1);
}

/* When hovered, move the head of the arrow to the right */
a .icon-arrow-right g.head {
	transform: translate(0);
}
a:hover .icon-arrow-right g.head {
	transform: translate(5px);
}

/******************* NOT MOBILE DEVICES *******************/

@media (min-width: 768px) {
	/* Removes excessive margin on grid UNLESS 'grid-keep-margin-bottom' class is used */
	.grid div p {
		margin-bottom: 0px;
	}
	.grid.grid-keep-margin-bottom div p {
		margin-bottom: var(--pico-typography-spacing-vertical); /* original value */
	}
}

/******************* MOBILE DEVICES *******************/

@media (max-width: 768px) {
	#map-grid a:not(:last-child) {
		margin-bottom: var(--pico-typography-spacing-vertical); /* Adds margin to bottom of a */
	}

	/* Removes excessive margin on grid UNLESS 'grid-keep-margin-bottom' class is used */
	.grid div:last-child p {
		margin-bottom: 0px;
	}
	.grid.grid-keep-margin-bottom div:last-child p {
		margin-bottom: var(--pico-typography-spacing-vertical); /* original value */
	}
}