.site-content section {
    padding-block: 7rem;
}

.wrapper {
    max-inline-size: 1200px;
    margin-inline: auto;
    padding-inline: 2rem;

    @media (min-width: 860px) {
        padding-inline: 5rem;
    }

    @media (min-width: 1200px) {
        padding-inline: 2rem;
    }
}

@media (min-width: 800px) {
    .cta-btn {
        width: max-content;
    }

    
}

.grid {
    display: grid;
    grid-template-columns: 1fr;
}

.grid-2 {
    gap: var(--space-lg);

    @media (min-width: 768px) {
        grid-template-columns: 1fr 1fr;
    }
}

.grid-4 {
    gap: var(--space-md);

    @media (min-width: 768px) {
        grid-template-columns: 1fr 1fr;
    }

    @media (min-width: 1200px) {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

.hero-grid {
    align-items: start;

    @media (min-width: 1000px) {
        align-items: center;
    }
    
}

.content-grid {
    gap: var(--space-xl);
}

/* Standard-Abstand im Flow */
.content-flow {
    --flow-space: var(--space-md);
}

/* Abstände in einem Flow */
.content-flow > * + * {
    margin-top: var(--flow-space);
}

/* Sonder-Utility für größere Abstände */
.mt-lg {
    margin-top: var(--space-lg);
}

/* Zwischen Medien mit .media und dem nachfolgenden Element */
.content-flow > .media + * {
    margin-top: 2rem;
}

/* Jeder Absatz der auf eine h3 folgt und ein direktes Kind von .content-flow ist */
.content-flow > h3 + p {
    margin-top: 0.5rem;
}

.flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.headline-left {
    text-align: left;
    align-items: start;
}

.img-wrapper {
    margin-inline-end: var(--shadow-offset);
}