.of-message {
    background: var(--of--color-black--300);
    display: flex;
    justify-content: center;
}

.of-masthead--home {   
    background: var(--of--color-black--100) url("/build/images/bg-masthead-SDK.svg") no-repeat;
    background-position: -22vw -30vw ;
    background-size: 70% auto;
    padding: calc(2 * var(--of--spacer--2xl)) var(--of--spacer--md) var(--of--spacer--xl);
    @media (min-width: $ov--breakpoint--sm) {
    background-position:-35vw 50.5%;
    background-size: 100% auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    grid-template-areas:
    ". title title title"
    ". content content content"
    ". action-1 action-2 ."
    }
    @media (min-width: $ov--breakpoint--lg) {
        padding: var(--of--spacer--2xl) calc(var(--of--spacer--3xl) + var(--of--spacer--md))  var(--of--spacer--2xl);
    }
    .of-heading {
        color: var(--of--color-white--100);
        letter-spacing: normal;
    }
    &__title {
        display: flex;
        flex-direction: column;
        line-height: 3rem;
        font-weight: normal;
        grid-area: title;
        span {
            &:first-of-type {
                font-size: 2.625rem;
            }
            &:last-of-type {
                font-size: 3.5625rem;
            }
        }
    }
    &__content {
        @media (min-width: $ov--breakpoint--sm) {
            max-width: 55vw;
            margin: var(--of--spacer--xl) 0;
        }
        grid-area: content;
        margin: var(--of--spacer--md) 0;
        text-transform: none;
    }
    .of-button {
        justify-self: start;
        white-space: nowrap;
        &:first-of-type {
            grid-area: action-1;
            margin-bottom: var(--of--spacer--md);
        }
        &+.of-button {
            grid-area: action-2;
        }
    }
}

.of-section-page-intro {
    display: flex;
    flex-wrap: wrap;

    &__header {
        background: var(--of--color-white--200);
        padding: var(--of--spacer--lg);
        
        @media (min-width: $ov--breakpoint--lg) {
                padding: var(--of--spacer--2xl) 0 var(--of--spacer--2xl) calc(var(--of--spacer--2xl) + var(--of--spacer--xl));
            &--overlay {
                padding-bottom: calc(var(--of--spacer--3xl) + var(--of--spacer--3xl));
                margin-bottom: calc(calc(var(--of--spacer--3xl) + var(--of--spacer--md) + 1px) * -1);
            }
        }
        width: 100%;
        & > * {
            @media (min-width: $ov--breakpoint--lg) {
                max-width: 55vw;
            }
        }
        .of-heading {
            color: var(--of--color-brand--200);
        }
    }
    .of-heading {
        margin-bottom: var(--of--spacer--sm);
    }
    &__content {
        background: var(--of--color-white--100);
        margin: var(--of--spacer--lg);
        padding-bottom: var(--of--spacer--lg);
        &:not(&--overlay){
            &__columns {
                padding: var(--of--spacer--lg);
            }
        }
         
        @media (min-width: $ov--breakpoint--lg) {
            margin: var(--of--spacer--xl) calc(var(--of--spacer--2xl) + var(--of--spacer--xl)) var(--of--spacer--2xl) calc(var(--of--spacer--2xl) + var(--of--spacer--xl));
            &--overlay {
                border: 1px solid var(--of--color-white--200);
                padding: var(--of--spacer--lg);
                margin-top: 0;
            }
            &__columns {
                column-count: 2;
            column-gap: calc(var(--of--spacer--2xl) * 2);
            margin-bottom: calc(var(--of--spacer--md) * -1);
            padding-bottom: var(--of--spacer--xl);
                > * {
                    margin-bottom: var(--of--spacer--md);
                }
            }
             
        }
    }
    &__footer {
        padding: 0 var(--of--spacer--xl) var(--of--spacer--xl);
        @media (min-width: $ov--breakpoint--lg) {
            padding: 0 calc(var(--of--spacer--2xl) + var(--of--spacer--xl)) var(--of--spacer--2xl)  calc(var(--of--spacer--2xl) + var(--of--spacer--xl));
        }
    }
    &__items {
        @media (min-width: $ov--breakpoint--lg) {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            margin: 0 var(--of--spacer--2xl);
        }
        
    }

    &__item {
        background: var(--of--color-white--100);
        &__build {
            .of-heading {
                background: var(--of--color-brand--100);
            }
        }
        &__manage {
            .of-heading {
                background: var(--of--color-brand--200);
            }
        }
        &__discover {
            .of-heading {
                background: var(--of--color-brand--300);
            }
        }
        &__content {
            padding: var(--of--spacer--lg);
            display: flex;
            flex-direction: column;
        }
        .of-heading {
            color: var(--of--color-white--100);
            padding:var(--of--spacer--lg) var(--of--spacer--md);
        }
    }

}