/* Minification failed. Returning unminified contents.
(15,17): run-time error CSS1039: Token not allowed after unary operator: '-brand-purple'
(46,17): run-time error CSS1039: Token not allowed after unary operator: '-brand-purple'
(56,28): run-time error CSS1039: Token not allowed after unary operator: '-brand-purple'
(70,17): run-time error CSS1039: Token not allowed after unary operator: '-brand-purple'
 */
#error section {
    padding: 1.5rem 0;
    display: grid;
    grid-gap: 1.5rem;
    /*margin: 0 auto;*/
}

#error section img {
    width: 10rem;
    height: auto;
    margin: 0 auto 2rem;
}

#error section h2 {
    color: var(--brand-purple);
    font-size: 1.75rem;
    margin: 0;
}

#error section h3 {
    font-size: 1.25rem;
    margin: 0;
}

#error section h3 span {
    font-weight: 500;
    font-size: 1rem;
}

#error section p { margin: 0; }

#error section .return-home-container {
    display: flex;
    justify-content: center;
}

#error section .return-home-container img {
    width: 2rem;
    height: auto;
    margin: 0;
}

#error section .return-home-container a {
    align-self: center;
    margin-left: 0.75rem;
    color: var(--brand-purple);
    font-weight: 600;
    position: relative;
}

#error section .return-home-container a::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 0.125rem;
    background-color: var(--brand-purple);
    bottom: -0.2rem;
    left: 0;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .3s ease-in-out;
}

#error section .return-home-container a:hover::before {
    transform-origin: left;
    transform: scaleX(1);
}

#error section .return-home-container a:hover {
    color: var(--brand-purple);
}

@media only screen and (min-width: 52.5rem) {
    #error section {
        /*margin: 3rem auto;*/
        /*max-width: 50rem;*/
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(2, 1fr) auto auto;
        grid-gap: 0rem
    }

    #error section img {
        width: 12rem;
        grid-column: 2;
        grid-row: 1 / span 4;
        margin: 0 auto 0;
    }

    #error section h2,
    #error section h3,
    #error section p {
        grid-column: 1;
        text-align: left;
    }

    #error section .return-home-container {
        grid-column: 1;
        justify-content: flex-start;
        margin-top: 1rem;
    }
}