.link {
    font-family: var(--sans-serif);
}

    .link--button {
        text-decoration: none;
        display: inline-block;
        background-color: var(--color);
        color: hsla(var(--button-text-color));
        padding: 1em 2em;
        border-radius: .25em;
        font-family: var(--sans-serif);

        
    }

    .link--button:hover {
            outline: 2px solid black;
            box-shadow: 0 0 0 4px #FFF;
            outline-offset: 1px;
            z-index: 1000;
        }

    .link--button--outline {
            border: 2px solid var(--color);
            background-color: #FFF;
            color: var(--color);
        }

    .link--button--outline-reverse {
            border: 2px solid #FFF;
            background-color: transparent;
            color: #FFF;
        }

    .link--button--solid {
            background-color: var(--color);
            color: var(--button-text-color);

            
        }

    .link--button--solid-reverse {
            background-color: #FFF;
            color: var(--color);
            font-weight: var(--semi-bold-weight);
        }

    .link--button--reduced {
            padding: .5em 1em;
            font-size: var(--step--1);
        }

    .link--text {
        text-transform: uppercase;
        font-size: var(--step-0);
        font-weight: var(--bold-weight);
        color: var(--color-purple);

    }

    .link--underline-gradient {
        @include links.gradient-link;
    }

.hide-desktop {
    display: inline-block;
}

@media (min-width: 1025px) {

.hide-desktop {
        display: none
}
    }

.hide-mobile {
    display: none;
}

@media (min-width: 1025px) {

.hide-mobile {
        display: inline
}
    }

.layout-builder__section .hide-mobile, .layout-builder__section .hide-desktop {
        display: inline;
    }