h1.title {
	max-width: 352px;
	gap: 10px;
	margin-bottom: 40px;
	padding-left: 0;
}
.articles-box {
	container: articles-container / inline-size;
}
.articles {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	.item {
		position: relative;
		width: 100%;
		padding: 6px;
		background: var(--white);
		border-radius: 30px;
		overflow: hidden;
		transition: box-shadow .2s linear;
		> a {
			position: absolute;
			inset: 0;
		}
		img {
			width: 100%;
			aspect-ratio: 46/30;
			border-radius: 24px;
			object-fit: cover;
			margin-bottom: 20px;
		}
		.head {
			font-size: 20px;
			font-weight: 600;
			line-height: 125%;
			display: -webkit-box;
			overflow: hidden;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			padding: 0 20% 0 10px;
			margin-bottom: 8px;
		}
		.box {
			display: flex;
			align-items: end;
			justify-content: space-between;
			padding-inline: 10px;
			margin-bottom: 10px;
			gap: 10px;
			span {
				font-size: 14px;
				font-weight: 600;
				line-height: 125%;
			}
			.btn {
				width: 40px;
				aspect-ratio: 1;
				flex-shrink: 0;
				border-radius: 50%;
				border: none;
				background-color: var(--white-grey);
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0;
				color: var(--grey-dark);
				&::after {
					content: '\e900';
					font: 100 16px / 1 'icon';
				}
			}
		}
	}
}
@container articles-container (width < 1160px) {
	.articles {
		grid-template-columns: repeat(3, 1fr);
	}
}
@container articles-container (width < 960px) {
	.articles {
		grid-template-columns: repeat(2, 1fr);
	}
}
@container articles-container (width < 560px) {
	.articles {
		grid-template-columns: 1fr;
	}
}
footer {
	margin-top: 150px;
}
@media screen and (max-width: 1152px) {
	footer {
		margin-top: 100px;
	}
}
@media screen and (max-width: 768px) {
	h1.title {
		max-width: 190px;
		margin-bottom: 30px;
	}
}
@media (hover: hover) {
	.articles .item:hover {
		box-shadow: 0px 44px 44px 0px rgba(0, 0, 0, 0.1), 0px 11px 24px 0px rgba(0, 0, 0, 0.1);
		.box .btn {
			color: var(--white);
			background-color: var(--ff-2-f-00);
		}
	}
}