.projects-grid-wrap {
    --pg-grid-gap: 32px;
	--pg-meta-gap: 16px;
    --pg-hero-ratio: 16 / 9;
    --pg-square-ratio: 1 / 1;
    --pg-landscape-ratio: 16 / 9;
    --pg-mobile-ratio: 4 / 3;
}
.projects-grid {
    margin: 0 auto;
}

.projects-grid a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.projects-grid__media {
    overflow: hidden;
    background: #eee;
}

.projects-grid__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.projects-grid__pattern {
    display: flex;
    flex-direction: column;
    gap: var(--pg-grid-gap);
    margin-bottom: calc(var(--pg-grid-gap) * 2);
}

/* Hero */
.projects-grid__hero-media {
    aspect-ratio: var(--pg-hero-ratio);
}

.projects-grid__hero-col {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.projects-grid__hero-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--pg-grid-gap);
	padding-top: var(--pg-meta-gap);
}

/* Offset grid */
.projects-grid__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--pg-grid-gap);
    align-items: start;
}

.projects-grid__col {
    display: flex;
    flex-direction: column;
    gap: var(--pg-grid-gap);
}

.projects-grid__card--square .projects-grid__media {
    aspect-ratio: var(--pg-square-ratio);
}

.projects-grid__card--landscape .projects-grid__media {
    aspect-ratio: var(--pg-landscape-ratio);
}

.projects-grid__card-meta {
	display: flex;
    flex-direction: column;
    gap: var(--pg-meta-gap);
	padding-top: var(--pg-meta-gap);
}

/* Text */
.projects-grid__luogo {
	margin: 0;
}

.projects-grid__title {
	font-weight: 600;
    margin: 0;
}

.projects-grid__short {
    color: var(--pg-muted);
    margin: 0;
}

/* Mobile: single column */
@media (max-width: 768px) {
    .projects-grid__hero-meta {
        grid-template-columns: 1fr;
    }

    .projects-grid__grid {
        grid-template-columns: 1fr;
    }

    .projects-grid__col {
        display: contents;
    }

    .projects-grid__hero-media,
    .projects-grid__card--square .projects-grid__media,
    .projects-grid__card--landscape .projects-grid__media {
        height: auto;
        aspect-ratio: var(--pg-mobile-ratio);
    }
}







/* Loading + empty states */
.projects-grid.is-loading {
    opacity: .4;
    pointer-events: none;
    transition: opacity .2s ease;
}

.projects-grid__empty {
    color: var(--pg-muted);
    margin: 0;
}