/*
==========
COMMON
==========
*/

/* ========== COMMON ========== */

body {
	font: 400 18px/28px "Lato", sans-serif;
	color: #000;
}

a {
	color: #2356cd;

	&:hover {
		text-decoration: none;
	}
}

img {
	max-width: 100%;
	height: auto;
}

.logo {
	display: block;
	padding: 24px 0;
	color: #fff;
	background-color: #082f8b;
	font-size: 30px;
	font-weight: 900;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;

	&:hover {
		color: #fff;
	}
}

main {
	padding: 32px 0;

	section.bg {
		margin: 0 0 32px;
		padding: 24px 28px 16px;
		border-radius: 8px;
		background-color: #f9f9f9;
	}

	h1 {
		margin: 0 0 32px;
		font-size: 28px;
		line-height: 36px;
		font-weight: 700;
	}

	h2 {
		margin: 0 0 32px;
		font-size: 24px;
		line-height: 32px;
		font-weight: 700;
	}

	h3 {
		margin: 0 0 8px;
		font-size: 20px;
		line-height: 26px;
		font-weight: 700;
	}

	p {
		margin: 0 0 24px;
	}

	ul {
		margin: 0 0 12px 16px;
		padding: 0;
	}

	ol {
		margin: 0 0 12px 16px;
		padding: 0;
	}
}

aside {
	img {
		display: block;
		width: 100%;
		margin: 0 0 16px;
		border-radius: 8px;
	}

	p {
		display: grid;
		gap: 16px;

		a {
			word-break: break-all;
			color: #000;
			text-decoration: none;

			strong,
			span {
				display: block;
			}

			&:hover {
				color: #2356cd;

				span {
					text-decoration: underline;
				}
			}
		}
	}
}

footer {
	padding: 16px 0;
	text-align: center;
	background-color: #000;
	color: #fff;
}

/* ========== END ========== */