/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1024px) {
    .site-content > .ast-container,
    .content-container {
        padding-inline: var(--page-padding-tablet);
    }

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

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

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

/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 767px) {
    .site-content > .ast-container,
    .content-container {
        padding-inline: var(--page-padding-mobile);
    }

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

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

    .grid--2,
    .grid--3,
    .grid--4 {
        grid-template-columns: minmax(0, 1fr);
    }

    .cluster {
        gap: var(--space-3);
    }
}