.block-course-hero {
    display: flex;
    gap: 20px;


    @media screen and (min-width: 768px) {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0 80px !important;
        align-items: flex-start !important;

        header {
            grid-column: 1;
        }

        .media {
            grid-column: 2;
            grid-row: span 2;
            margin-top: 64px;
        }
        
    }

    .course-hero--form {
        input {
            height: 44px;
            display: flex;
            justify-content: center;
            font-size: 18px;
            font-family: var(--font-sans);
        }

        .hs-input {
            margin-top: 32px;
            font-weight: 400;
            width: 100%;
            padding-left: 24px;
            color: #586069;
            background: #FFFFFF;
            border: 1px solid #A5A9AE;
            border-radius: 6px;
        }

        .actions {
            display: flex;
        }

        .hs-form-field label:has(span:empty), .hs-form-field label:empty {
            display: none;
        }

        .hs-button {
            color: var(--color-text-invert);
            font-weight: 600;
            flex-grow: 1;
            width: auto;
            background-color: var(--color-text);
            border-radius: 5px;
            box-shadow: none;
            border: 0;
            margin-top: 16px;
            padding: 8px 16px;
            max-width: max-content;
            height: auto;
        }

        .hs-error-msgs {
            display: none;
        }


        .hbspt-form form, .submitted-message {
            color: var(--color-text);
            border-radius: 2px;
            padding: 0px;
            display: flex;
            flex-direction: column;
            align-items: left;
            box-sizing: border-box;
        }

        .hbspt-form fieldset {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            width: 100% !important;
            max-width: none !important;
        }

        .field {
            min-width: 250px;
        }

        .hbspt-form h1, .submitted-message p {
            color: var(--color-text);
            margin: 0px;
            margin-bottom: 16px;
            line-height: 1.2;
            font-size: 16px;
        }

        .hbspt-form p {
            margin: 0px;
            margin-top: 0px;
        }

        .input {
            display: flex;
        }

        .hbspt-form input, select {
            height: 44px;
            display: flex;
            justify-content: center;
            font-size: 16px;
        }

        .hs-fieldtype-select span {
            display: none;
        }

        .hs-input {
            margin-top: 16px;
            font-weight: 400;
            width: 100%;
            padding-left: 24px;
            padding-right: 12px;
            color: var(--color-text);
            border: 1px solid var(--color-divider);
            border-radius: 5px;
        }

        .hs-fieldtype-select {
            color: var(--color-text);
        }

        .actions {
            display: flex;
        }

        .hs-button {
            color: var(--color-text-invert);
            font-weight: 500;
            flex-grow: 1;
            background-color: var(--color-text);
            border-radius: 5px;
            box-shadow: none;
            border: 0;
            margin-top: 16px;
            max-width: 350px !important;
        }

        .hs-error-msgs {
        display: none;
        }

        .hs-fieldtype-select::placeholder,
        .hs-input::placeholder {
            color: var(--color-text);
            opacity: 1;
        }

        .hs_courses_of_interest__c {
            margin-top: 16px;
            margin-bottom: 16px;
        }

        .hbspt-form ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
        }

        .hbspt-form li {
            padding: 0px 0;
        }

        .hbspt-form li label {
            display: flex;
            align-items: center;
            font-size: 14px;
            font-weight: 400;
            margin: 6px 0px -10px 24px !important;
        }

        .hbspt-form li label input {
            margin-right: 12px;
            height: auto;
        }

        .hs-button.primary {
            background-color: var(--color-text);
            color: var(--color-text-invert);
        }
    }

}