/***************************************************************************
**  FOOTER
***************************************************************************/

footer {

    --footer__font             : normal 0.9rem/1.5 var(--ff-regular);
    --footer__color            : var(--site__color-dark);
    --footer__background-color : var(--site__color-light);

    --footer__nav-font         : 600 1.3rem/1.4 var(--ff-regular);
    --footer__nav-color        : var(--site__color-accent);
    --footer__nav-hover-color  : var(--site__color-light);

    position                   : relative; 
    font                       : var(--footer__font);
    color                      : var(--footer__color);
    background-color           : var(--footer__background-color);
    z-index                    : 2;

    width                      : 100%;
    margin-inline              : auto;
    background-repeat          : repeat;

/*    padding-inline             : 1rem;*/
    img { object-fit           : fill; }

    .media {
        display                : flex;
        margin                 : 0 auto;
        justify-content        : center;
    }

    nav {
        text-align             : center;
        padding-block          : 1rem 2rem;
        margin-inline          : auto;

        flex-direction         : row;
        align-items            : center;
        justify-content        : center;
        padding-block-start    : 1rem;

        color                  : var(--footer__nav-color);

        font                   : var(--footer__nav-font);
        display                : none;
        @media screen and (width > 768px) {
            display            : flex;
            font-size          : 1.3rem;
        }

        a {
            font               : inherit;
            color              : inherit;
            position           : relative;
            text-decoration    : none;
            margin-inline      : 1em;

            &:hover {
                color          : var(--footer__nav-hover-color); 
            }

            &:not(:last-child)::after { 
                content                : "";
                position               : absolute;
                top                    : 0.2em;
                height                 : 1em;
                background-color       : var(--footer__nav-color); 

                --width                : 2px;
                width                  : var(--width);
                margin-inline          : calc(1em - var(--width) / 2);

             /* transform              : rotate(10deg); */
            }
        }

        .short-terms {
            margin                     : 0 auto;
            font-size                  : 0.9em;
            padding                    : 2rem 4rem;
            text-align                 : center;
            color                      : var(--site__color-dark);
            background-color           : transparent;

            max-width                  : var(--std-width);
            @media screen and (width > 768px) {
                max-width              : var(--mid-width);
            }

            a {
                color                  : inherit;
                font-weight            : var(--fw-bold);
                text-decoration        : none;
            }
        }
    }
}