@layer views {
	main > header{
		svg{
			.clickable{
				cursor: pointer;
				transition: fill .2s;

				&:hover,
				&:hover *{
					fill: rgba(var(--color-crimson)) !important;
				}

				*{
					transition: fill .2s;
				}
			}
		}

		h1{
			margin-bottom: calc(var(--spacer) * 2);
			font-size: 2.888em;

			@container content (max-width: 768px) {
				font-size: 1.777em;
			}
		}

		.main-content{
			padding-block: var(--section-padding);
		}
	}

	.region-navigation{
		--color-link: var(--color-text);
		--color-link-hover: var(--color-text);
		--color-link-visited: var(--color-text);
		--column-gap: calc(var(--spacer) * 2.777);

		display: flex;
		justify-content: center;

		@container content (max-width: 768px) {
			display: none;
		}

		ul{
			padding-block: calc(var(--spacer) * 1.222) calc(var(--spacer) * .5);
			justify-content: center;
			border-bottom: 1px solid rgba(var(--color-gray-25));
		}

		a{
			text-decoration-color: transparent;
			font-weight: 600;
			display: inline-block;
			margin-block: calc(var(--spacer) * .333);

			&:hover{
				text-decoration-color: rgba(var(--color-link), .4);
			}
		}
	}

	.region{
		--color-link: var(--color-text);
		--color-link-hover: var(--color-secondary);
		--color-link-visited: var(--color-text);

		padding-block: var(--section-padding);

		h2{
			color: rgba(var(--color-secondary));
			margin-bottom: calc(var(--spacer) * 3);
		}

		h3{
			font-weight: 700;
		}

		.countries-with-page{
			--row-gap: calc(var(--spacer) * 2);
			--column-gap: calc(var(--spacer) * 2);

			a{
				font-weight: 700;

				span{
					text-decoration-color: transparent;
				}

				&:hover{
					span{
						text-decoration-color: rgba(var(--color-link-hover), .4);
					}
				}
			}

			img{
				display: block;
				margin-bottom: var(--spacer);
				width: 100%;
			}
		}

		.country-with-page,
		.country-without-page{
			--flex-width: calc(1 / 2 * 100%);

			flex: 0 0 var(--flex-width);
			max-width: var(--flex-width);
		}

		@container content (min-width: 769px) {
			.country-with-page,
			.country-without-page{
				--flex-width: calc(1 / 3 * 100%);
			}
		}

		@container content (min-width: 1025px) {
			.country-with-page,
			.country-without-page{
				--flex-width: calc(1 / 5 * 100%);
			}
		}

		.hub-header{
			border-top: 1px solid rgba(var(--color-gray-25));
			margin-block: calc(var(--spacer) * 3);
			padding-top: calc(var(--spacer) * 3);

			@container content (max-width: 768px) {
				h3{
					font-size: 1.111em;
				}

				> *:nth-child(2){
					display: none;
				}
			}
		}

		.mobile-contact{
			display: none;
			margin-top: calc(var(--spacer) * 2);

			@container content (max-width: 768px) {
				display: block;
			}

			.btn{
				width: 100%;
			}
		}
	}
}