@media (max-width: 1200px) {
    .cl-container {
        padding: 0 20px;
    }
}

@media (max-width: 992px) {
    .cl-hero__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .cl-hero-illustration {
        height: 220px;
    }
}

@media (max-width: 768px) {
    .cl-container {
        padding: 0 16px;
    }

    .cl-main {
        padding-top: 76px;
    }

    .cl-heading-1 {
        font-size: 34px;
    }

    .cl-heading-2 {
        font-size: 26px;
    }

    .cl-cta {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .cl-heading-1 {
        font-size: 30px;
    }

    .btn {
        width: 100%;
        justify-content: center;
    }

    .cl-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }
}