/*
  Wraps around a page's main body content, centering the content and
  limiting it to a max 1440px width. With reducing margins as screen size narrows.
 */
.page-content-container {
    width: 100%;
    max-width: var(--page-content-max-width);
    padding: 0 var(--spacing-2x);
    margin: 0 auto;
}

/*
  Wraps around the content of the Header and Breadcrumb bar, centering the content and
  limiting it to a max 1440px width. With reducing margins as screen size narrows.
 */
.page-content-container.wide-content {
    max-width: var(--page-content-wide-max-width);
}

/*
  Exceptionally wide page, basically just the admin's view of an event page with
  event preview enabled renders at this resolution.
 */
.page-content-container.ultrawide-content {
    max-width: var(--page-content-ultrawide-max-width);
}

/*
  Dynamically adds extra padding for containers that should be 80px from the 1400px
  container edge, scaling down to be 0 for mobile display sizes. Such as the frontpage
  card grid.
*/
.container-inner-padding {
    padding: 0;
}

@container main (width > 600px) {

    .page-content-container,
    .container-inner-padding {
        padding: 0 var(--spacing-5x);
    }
}

@container main (width > 1200px) {

    .page-content-container,
    .container-inner-padding {
        padding: 0 var(--spacing-10x);
    }
}

.page-wide-eventcard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@container main (width > 720px) {
    .page-wide-eventcard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@container main (width > 1200px) {
    .page-wide-eventcard-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.program-event-grid,
.raffle-eventcard-grid {
    display: grid;
    gap: var(--spacing-8x);
}

.program-event-grid {
    gap: var(--spacing-4x);
}

.program-event-row {
    display: grid;
    grid-template-columns: 1.618fr 1fr;
    gap: var(--spacing-4x);
}

.program-event-row.reversed {
    grid-template-columns: 1fr 1.618fr;
}

.program-event-row > .event-card-container {
    min-width: 0;
}

.raffle-eventcard-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-4x);
}

@container main (width <= 720px) {
    .program-event-row,
    .program-event-row.reversed {
        grid-template-columns: 1fr;
    }
}

@container main (width > 720px) {
    .raffle-eventcard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container main (width > 1200px) {
    .raffle-eventcard-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}