.columned-content {
    max-width: 1260px;
    margin: auto;

    >.intro .headline {
        font-size: clamp(1.5rem, 1.5rem + ((1vw - 0.2rem) * 1.447), 2.35rem);
        margin-block-start: clamp(.5rem, 2.5vw, 1rem);
        margin-block-end: clamp(.5rem, 2.5vw, 1rem);
    }

    >.intro .text {
        font-size: clamp(.9rem, 0.9rem + ((1vw - 0.2rem) * 0.255), 1.05rem);
    }

    >.grid {
        display: grid;
        gap: clamp(1rem, 2vw, 2rem);
        margin-top: clamp(1.5rem, 4vw, 3rem);

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

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

        &.-four {
            grid-template-columns: repeat(4, 1fr);
        }

        &.-five {
            grid-template-columns: repeat(5, 1fr);
        }

        >.grid-item {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            height: 100%;
            padding: clamp(1rem, 2vw, 1.5rem);
            background: #fff;

            &.card {
                padding: clamp(1.25rem, 2vw, 2rem);
                border: 1px solid #ddd;
                border-radius: 12px;
                background: #fff;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            }

            &.plain {
                padding: 0;
                border: 0;
                background: transparent;
                box-shadow: none;
            }

        }



        >.grid-item .headline {
            margin: 0;
            font-size: clamp(1.125rem, 1vw + 1rem, 1.5rem);
            font-weight: 600;
        }

        >.grid-item .content {
            flex: 1;
            font-size: clamp(.9rem, 0.9rem + ((1vw - 0.2rem) * 0.255), 1.05rem);
        }

        >.grid-item .link {
            color: #111827;
            font-family: var(--font-family);
            font-size: .875rem;
            font-weight: 600;
            margin-top: auto;
            align-self: flex-start;
            text-decoration: none;

            &:hover {
                text-decoration: underline;
            }
        }
    }

    @media (max-width: 1024px) {
        >.grid {

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

    @media (max-width: 768px) {
        >.grid {
            grid-template-columns: repeat(2, 1fr) !important;
        }
    }

    @media (max-width: 480px) {
        >.grid {
            grid-template-columns: 1fr !important;
        }
    }
}