/* Feed */

	.main.hero {
		min-height: 45vh;
		align-items: center;
	}

		.main.hero .content > header {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 1em;
		}

	#feed {
		padding: 5%;
		min-height: 100%;
		background-attachment: fixed;
	}

		#feed .featured {
			background-color: #ffffff;
			display: flex;
			margin-bottom: 2em;
			box-shadow: 0 0.15em 0.5em 0 rgba(0, 0, 0, 0.15);
			transition: box-shadow 0.25s ease, transform 0.25s ease;
		}

			#feed .featured:hover {
				box-shadow: 0 0.4em 1.5em 0 rgba(0, 0, 0, 0.25);
			}

			#feed .featured .image {
				max-width: 50%;
				flex-shrink: 0;
			}

				#feed .featured .image img {
					height: 100%;
					width: 100%;
					object-fit: cover;
				}

			#feed .featured .content {
				padding: 1.5em 15px 1.5em 15px;
				display: flex;
				flex-direction: column;
				flex-grow: 1;
			}

				#feed .featured .content header {
					display: flex;
					justify-content: space-between;
					align-items: baseline;
				}

				#feed .featured .content header h3 {
					flex-grow: 1;
					font-size: 2em;
				}

				#feed .featured .content header .date {
					color: #666;
					white-space: nowrap;
					margin-left: 1em;
				}

				#feed .featured .content p {
					flex-grow: 1;
				}

				#feed .featured .content .more {
					text-align: right;
				}

		#feed .grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 2em;
		}

			#feed .grid .card {
				background-color: #ffffff;
				display: flex;
				flex-direction: column;
				box-shadow: 0 0.15em 0.5em 0 rgba(0, 0, 0, 0.15);
				transition: box-shadow 0.25s ease, transform 0.25s ease;
			}

				#feed .grid .card:hover {
					box-shadow: 0 0.4em 1.5em 0 rgba(0, 0, 0, 0.25);
					transform: translateY(-0.25em);
				}

				#feed .grid .card .image {
					aspect-ratio: 16 / 9;
					overflow: hidden;
					flex-shrink: 0;
				}

					#feed .grid .card .image img {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}

				#feed .grid .card .content {
					padding: 1.5em 15px 1.5em 15px;
					display: flex;
					flex-direction: column;
					flex-grow: 1;
				}

					#feed .grid .card .content header {
						display: flex;
						justify-content: space-between;
						align-items: baseline;
					}

					#feed .grid .card .content header .date {
						color: #666;
						font-size: 0.75em;
						text-transform: uppercase;
						letter-spacing: 0.05em;
						white-space: nowrap;
						margin-right: 1em;
					}

					#feed .grid .card .content p {
						flex-grow: 1;
					}

					#feed .grid .card .content .more {
						text-align: right;
					}

/* News item */

	#news-item .banner {
		position: relative;
		min-height: 45vh;
		background-size: cover;
		background-position: center;
		display: flex;
		align-items: flex-end;
	}

	#news-item .banner .overlay {
		width: 100%;
		padding: 5%;
		color: #ffffff;
		background-color: rgba(0, 0, 0, 0.5);
	}

	#news-item .banner .overlay h2 {
		margin: 0 0 0.25em 0;
	}

	#news-item .banner .overlay .date {
		color: #ddd;
	}

	#news-item .container {
		max-width: 60em;
		margin: 0 auto;
		padding: 3em 5%;
		line-height: 1.6;
	}

	#news-item .container .body {
		margin-bottom: 2em;
	}

	#news-item .container .back {
		margin-top: 2em;
		text-align: right;
	}

	@media screen and (max-width: 736px) {
		#feed .grid {
			grid-template-columns: 1fr;
		}
	}

	@media screen and (max-width: 480px) {
		#feed {
			padding: 2.5%;
		}

		#feed .featured {
			flex-direction: column;
		}

			#feed .featured .image {
				max-width: 100%;
			}

				#feed .featured .image img {
					aspect-ratio: 16 / 9;
					object-fit: cover;
				}
	}