:root {
	--main-title-color: #5b143a;
	--main-subtitle-color: #5b143a;
}

/* Elenco ricette: griglia a colonne con celle max 150px; padding = gap per margini laterali uguali ai passi */
.frontend-content-pagina-items-list {
	--grid-columns: 5;
	--grid-gap: 2rem;
	--cell-width: 140px;
	--cell-max-width: 150px;

	.frontend-content-list__items {
		display: grid;
		grid-template-columns: repeat(var(--grid-columns), var(--cell-width));
		gap: var(--grid-gap);
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
		justify-content: center;

		.ricetta-card {
			--color-title: #fff;
			--card-width: var(--cell-width);
			--card-height: var(--cell-width);
			--card-image-width: var(--card-width) !important;
			--card-image-height: var(--card-height) !important;
			--font-size-title: 15px;
			width: 100%;
			max-width: var(--cell-max-width);
			justify-self: center;

			.card__body,
			.card__link {
				width: 100%;
			}

			.card__link {
				position: relative;
				border: 1px solid var(--border-color);
			}

			.card__image-wrapper {
				width: 100%;
				height: auto;
				aspect-ratio: 1 / 1;

				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					border: 0 !important;
				}
			}

			.card__content {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				padding: 0.5rem;
				background-color: rgba(115, 36, 79, 0.8);
			}

			h3 {
				margin-bottom: 0 !important;
			}
		}
	}
}

/* Responsive */
@media (max-width: 1199.98px) {
	.frontend-content-pagina-items-list .frontend-content-list__items {
		--grid-gap: 2rem;
		--grid-columns: 4;
	}
}

@media (max-width: 991.98px) {
	.frontend-content-pagina-items-list .frontend-content-list__items {
		--grid-gap: 1.5rem;
		--grid-columns: 3;
	}
}

@media (max-width: 767.98px) {
	.frontend-content-pagina-items-list .frontend-content-list__items {
		--grid-gap: 1rem;
		--grid-columns: 2;
	}
}

@media (max-width: 479.98px) {
	.frontend-content-pagina-items-list .frontend-content-list__items {
		--grid-columns: 2;
	}
}