section#blog-1 {
	display: flex;
	align-items: flex-end;

	&::before {
		background-image: url('../images/maldives-360.webp');
		background-position: center bottom;
		top: calc(var(--currentScroll) * -0.5);
	}

	& div.titre {
		margin-bottom: 15%;
		margin-left: 20px;
	}
}

section#blog-2 {
	display: flex;
    flex-direction: column;
    align-items: center;
	padding: 24px 20px 12px 20px;

	& h1 {
		font-size: 20px;
	    line-height: 30px;
	    letter-spacing: 0px;
	}
}

section#blog-3 {
	padding: 0;
}

section:is(#blog-3, .related-articles:has(> div.blog-grid > div)) {
	display: flex;
	flex-direction: column;
	align-items: center;
}

div#blog section:not(:first-child) {
	background: var(--background);
}

.blog-grid {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 24px;
	width: min(380px, 100%);
	margin: 12px auto 24px auto;

	& > article {
		filter: brightness(1);
		transition: filter .3s ease-out;

		&:hover {
			filter: brightness(0.97);
			cursor: pointer;
		}
	}

	& img {
		position: relative;
		width: 100%;
		height: 244px;
		object-fit: cover;
		object-position: center;
		border-radius: 4px;
		margin-bottom: -24px;
	}

	& div.content {
		position: relative;
		margin: 0 auto;
		max-width: calc(100vw - 80px);
		padding: 24px 20px;
		height: calc(100% - 244px - 48px + 20px);
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		text-align: left;
		z-index: 1;

		& h2 {
			font-size: 24px;
			line-height: 36px;
			margin-bottom: 0;
		}

		& h3 {
			font-size: 20px;
			line-height: 30px;
			margin-top: 0;
			margin-bottom: 0;
		}

		& div.tags {
			margin: 10px -4px;

			& > div {
				margin: 2px;
				display: inline-block;
				background-color: var(--wyg-blue-alt-05);
				color: var(--wyg-blue);
				font-weight: bold;
				border-radius: 4px;
				padding: 8px 12px;
			}
		}
	}
}

@media only screen and (min-width: 360px) {

	section#inspi-1::before {
		background-image: url('../images/maldives-720.webp');
	}
}

@media only screen and (min-width: 640px) {

	section#blog-2 {
		padding: 40px 4rem 28px 4rem;
	}

	section#blog-2 h1 {
		font-size: 24px;
	    line-height: 36px;
	    letter-spacing: 0.36px;
	}
}

@media only screen and (min-width: 720px) {

	section#blog-1::before {
		background-image: url('../images/maldives-1440.webp');
	}

	section#blog-1 div.titre {
		margin-bottom: 7rem;
		margin-left: 8vw;
	}
}

@media only screen and (min-width: 800px) {

	section#blog-2 {
		padding: 40px 8rem 28px 8rem;
	}

	.blog-grid {
		grid-template-columns: 1fr 1fr;
		width: min(calc(380px * 2 + 24px), calc(100% - 40px));
	}
}

@media only screen and (min-width: 1024px) {

	section#blog-2 h1 {
		font-size: 28px;
	}

	.blog-grid {
		margin: 28px auto 40px auto;
	}
}

@media only screen and (min-width: 1200px) {

	.blog-grid {
		grid-template-columns: 1fr 1fr 1fr;
		width: min(calc(380px * 3 + 24px * 2), calc(100% - 40px));
	}
}

@media only screen and (min-width: 1600px) {

	.blog-grid {
		grid-template-columns: 1fr 1fr 1fr 1fr;
		width: min(calc(380px * 4 + 24px * 3), calc(100% - 40px));
	}
}

@media only screen and (min-width: 720px) and ((min-height: 644px) or (min-width: 1440px)) {

	section#blog-1::before {
		background-image: url('../images/maldives-2880.webp');
	}
}