header {
	background-color: transparent;
	position: relative;

	img {
		width: 100%;
		position: absolute;
		z-index: -1;
		height: 305px;

		&.s1920 {
			display: block;
		}

		&.s385 {
			display: none;
		}
	}

	.content {
		height: auto;
		padding: 0;
		width: 100%;
		max-width: 720px;
		margin-inline: auto;
		overflow: visible;
		flex-direction: column;
		justify-content: start;
		gap: 0;

		.breadcrums {
			display: flex;
			align-items: center;
			gap: 5px;
			font-size: 20px;
			font-weight: 300;
			margin-top: 40px;

			a {
				color: var(--bg);
			}

			span {
				opacity: 0.5;
			}
		}

		.name {
			font-size: 96px;
			font-weight: 700;
			margin-top: 20px;
			line-height: 115px;
		}

		.tagline {
			font-size: 20px;
			margin-top: -20px;
		}
	}
}

.body {
	width: 100%;
	margin-top: 150px;

	.content {
		max-width: 720px;
		margin-inline: auto;
		padding: 0;
		color: var(--accent);

		.header {
			.title {
				font-size: 64px;
				font-weight: 700;
			}

			.note {
				font-size: 16px;
				font-weight: 300;
				margin-top: -16px;
			}

			.contact {
				margin-top: 30px;
				font-size: 20px;

				a {
					font-weight: 600;
					color: var(--accent);
				}
			}
		}

		.poems {
			margin-top: 100px;
			color: var(--accent);

			.poem {
				display: block;
				margin-bottom: 56px;
				text-decoration: none !important;
				cursor: pointer;

				&:hover {
					.poem-title {
						text-decoration: underline;
						text-shadow: 2px 5px 14px rgba(206, 154, 154, 0.7);
					}

					.poem-text {
						text-shadow: 2px 5px 14px rgba(206, 154, 154, 0.7);
					}
				}

				.poem-title {
					font-size: 40px;
					font-weight: 600;
					text-decoration: none;
				}

				.poem-text {
					font-size: 20px;
					font-weight: 400;
					margin-top: 10px;
					text-decoration: none;
				}
			}
		}
	}
}

@media screen and (max-width: 512px) {
	header img {
		& {
			height: 260px;
		}

		&.s1920 {
			display: none;
		}

		&.s385 {
			display: block;
		}
	}

	header {
		.content {
			width: auto;
			padding-inline: 10px;

			.name {
				font-size: 48px;
				line-height: normal;
			}

			.tagline {
				font-size: 16px;
				margin-top: -8px;
			}
		}
	}

	.body {
		.content {
			padding-inline: 10px;

			.header {
				.title {
					font-size: 40px;
				}
				.note {
					font-size: 14px;
					margin-top: -5px;
				}
			}

			.poems {
				.poem {
					.poem-title {
						font-size: 32px;
					}
					.poem-text {
						font-size: 16px;
					}
				}
			}
		}
	}
}