/* ==========================================
   Container
========================================== */

.container {
    width:min(
        calc(100% - (var(--container-padding) * 2)),
        var(--container-width)
    );
    margin-inline:auto;
}

/* ==========================================
   Section
========================================== */

.section {
    padding-block:var(--space-section);
}

.section-lg {
    padding-block:var(--space-section-lg);
}

/* ==========================================
   Grid
========================================== */

.grid {
    display:grid;
    gap:var(--space-lg);
    grid-template-columns: 1fr;
}

.grid--2 {
    grid-template-columns:repeat(2,1fr);
}

.grid--3 {
    grid-template-columns:repeat(3,1fr);
}

.grid--70-30 {
    grid-template-columns: 7fr 3fr;
    align-items: start;
}

.grid--70-30 .project-card .media--16-9 {
    aspect-ratio: 4 / 3; /* o 3 / 2 */
}

@media (max-width: 768px) {
    .grid--3 {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

@media (max-width: 768px) {
    .grid--70-30 {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* ==========================================
   Stack
========================================== */

.stack {
    display:flex;
    flex-direction:column;
    gap:var(--space-md);
}

.stack-sm {
    display:flex;
    flex-direction:column;
    gap:var(--space-sm);
}

.stack-lg {
    display:flex;
    flex-direction:column;
    gap:var(--space-lg);
}

/* ==========================================
   Cluster
========================================== */

.cluster {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--space-md);
}

/* ==========================================
   Split
========================================== */

.split {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--space-xl);
}

/* ==========================================
   Flow
========================================== */

.flow > * + * {
    margin-top:var(--flow-space,var(--space-md));
}


/* ==========================================
   Media
========================================== */

.media {
	position: relative;
    overflow: hidden;
}

.media--16-9 {
    aspect-ratio: 16 / 9;
}

.media--9-16 {
    aspect-ratio: 9 / 16;
    border-radius: 12px;
}

.media--1-1 {
    aspect-ratio: 1 / 1;
}

.media--evento-horizontal{
    aspect-ratio: 21 / 16;
}

.media img,
.media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}



@media (max-width: 768px) {
    .container {
        width: min(100% - 2rem, 1440px);
    }
}