/* Custom styles for news component */

.news {

	@media screen and (width >= 600px) {
		display: flex;
		gap: .5rem;
	}
}

.tile--news {

	flex: 1;
	max-width: 400px;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto 1lh 1fr ;
	gap: 0.5lh 1rem;
	padding: 1rem;
	border: 1px solid #ccc;
	margin-block-end: 1lh;

	.tile_heading {
		grid-column: 1 / -1;
		grid-row: 1 / 1;
		justify-self: end;
		align-self: end;
		z-index: 1;
		padding: 0.5lh 1rem;
		margin: 0;
		color: #fff;
		font-weight: bold;
	}

	.tile_img {
		position: relative;
		grid-column: 1 / -1;
		grid-row: 1 / 1;

		&::before {
			content: '';
			position: absolute;
			inset: 0;
			background-color: #0004;
		}

		.img-fluid {
			width: 100%;
			object-fit: cover;
			aspect-ratio: 5 / 3;
		}
	}

	.tile_date {
		margin: 0;
		text-align: right;
	}

	.tile_text {
		grid-row: 3 / -1;
	}

}