.of-footer-main {
    background: var(--of--color-brand--300);
    color: var(--of--color-white--100);
    position: relative;
    width: 100%;
    @media (min-width: $ov--breakpoint--lg) {
        display: grid;
        grid-template-columns: minmax(50%, 600px) 1fr;
        grid-gap: var(--of--spacer--xl);
        grid-template-areas: 
        "meta social"
        "copy copy "
        ;

    } 
    &:before {
        content:'';
        height: 5px;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: linear-gradient(to right, var(--of--color-brand--50) 25%, var(--of--color-brand--100) 25%, var(--of--color-brand--100) 50%, var(--of--color-brand--100) 50%, var(--of--color-brand--200) 50%, var(--of--color-brand--200) 75%, var(--of--color-brand--300) 75%);
    }
    padding-top: var(--of--spacer--2xl);
    .of-heading {
        margin-bottom: var(--of--spacer--sm);
    }
    &__meta {
        grid-area: meta;
        padding: 0 var(--of--spacer--lg) var(--of--spacer--lg) var(--of--spacer--lg);
        & > *:not(:last-child){
            margin-bottom: var(--of--spacer--sm);
        }
        .of-link-list {
            flex-direction: column;
            @media (min-width: $ov--breakpoint--lg) {
                flex-direction: row;
            }
        }
        @media (min-width: $ov--breakpoint--lg) {
            flex-direction: row;
            padding: 0 0 0 var(--of--spacer--2xl);
            .of-link-list__li {
                
                &:not(:last-of-type) {
                    margin-right: var(--of--spacer--sm);
                    border-right: 1px solid var(--of--color-brand--100);
                    padding-right: var(--of--spacer--sm);
                }             
            }
            .of-link-list__a {
                text-decoration: underline;
            }
        }
        img {
            max-width: 200px;
        }
    }
    &__social {
        grid-area: social;
        padding:var(--of--spacer--lg);
        @media (min-width: $ov--breakpoint--lg){
            padding:0;
        }
        .of-link-list {
            &__li {
                margin-right: var(--of--spacer--md);
                display: flex;
            }
            &__a {
                display: flex;
                align-items: center;
                font-size: 2rem;
                &:hover, &:active, &:focus {
                    text-decoration: none;
                    opacity: .8;
                }
            }
        }
        input {
            margin-bottom: var(--of--spacer--lg);
            border-radius: var(--of--BorderRadius--lg);
            border: none;
            text-indent: 1ch;
            min-width: 250px;
        }
    }
    &__copyright {
        grid-area: copy;
        display: flex;
        color: var(--of--color-white--100);
        padding: var(--of--spacer--xl);
        background: var(--of--color-black--300);
        .of-link-list__li {
            margin-left: var(--of--spacer--sm);
        }
    }
    .of-link-list {
        display: flex;
        flex-wrap: wrap;
    }
    &__badge {
        margin-left: auto;
    }
}