footer {
    --gap: 20px;
    --gap-col: 30px;
    --num-el: 1;
    --link-opacity: .761;
    overflow: hidden;

    @media (min-width: 576px) {
        --num-el: 2;
    }
    @media (min-width: 768px) {
        --num-el: 3;
    }
    @media (min-width: 992px) {
        & .footer-content__intro, .footer-content__col-wrapper {
            margin-right: auto;
        }
    }
    @media (min-width: 1400px) {
        --num-el: 4;
    }
    @media (min-width: 768px) and (max-width: 991.98px) {
        & .footer-content {
            justify-content: center;
        }
    }
    @media (max-width: 991.98px) {
        & .footer-content {
            flex-wrap: wrap;
        }
        & .footer-content__col-wrapper {
            margin-left: auto;
            margin-right: auto;
        }
    }

    font-family: var(--font-canela);
    color: var(--white);
    padding-top: calc(150px - var(--section-offset));

    & .footer-content {
        font-size: 14px;
        font-weight: 300;
        background-color: var(--red);
        padding: 40px var(--gap);
        display: flex;
        gap: var(--gap-col);
        position: relative;

        & a:not(.footer-logo, .footer-logo-solgar) {
            text-decoration: unset;
            color: inherit;
            opacity: var(--link-opacity);
            transition: var(--transition-standard);
            &:hover {
                opacity: 1;
            }
        }

        & .footer-logo-solgar {
            width: 117px;
            display: block;
        }
        & .footer-logo {
            width: 150px;
            display: block;
        }
        & h4 {
            font-family: var(--font-canela);
            font-size: 16px;
            font-weight: 400;
            padding: 0;
            margin: 0;
        }

        & .footer-content__intro {
            font-family: var(--font-roboto);
            line-height: 1.6em;
            max-width: 400px;
            display: flex;
            flex-wrap: wrap;
            gap: calc(var(--gap) * 2);

            & .footer-solgar {
                font-size: 12px;
                display: flex;
                flex-direction: column;
                gap: var(--gap);
            }
        }
        & .footer-content__col-wrapper {
            display: flex;
            /* flex-wrap: wrap; */
            gap: var(--gap-col);
            & .footer-content__col {
                width: calc(100% / var(--num-el) - var(--gap-col) / var(--num-el) * (var(--num-el) - 1));
                display: flex;
                flex-direction: column;
                gap: var(--gap);
            }
        }
        @media (min-width: 1200px) {
            max-width: 90%;
            padding: 80px 0px 40px calc(var(--gap) * 2);
            &::before {
                content: "";
                width: 10vw;
                height: 50%;
                background-color: var(--sand);
                display: block;
                position: absolute;
                bottom: 0;
                left: 100%;
            }
        }
    }

    & .footer-outro {
        font-size: 14px;
        font-weight: 300;
        color: var(--sand-dark);
        background-color: var(--sand);
        padding: var(--gap);
        & .footer-outro__content {
            display: flex;
            gap: var(--gap) 50px;
            flex-wrap: wrap;
            @media (min-width: 1200px) {
                max-width: 90%;
            }
        }
        & .align-right {
            margin-left: auto;
        }
        & p {
            margin: 0;
        }
        & a {
            text-decoration: unset;
            color: inherit;
        }
        @media (min-width: 1200px) {
            padding: calc(var(--gap) * 2);
        }
    }
}

.local-tasks{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  justify-content: center;
  ul{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
  }
  a{
    display: block;
    padding: 10px;
    border: 1px solid #ccc;
    background-color: #fff;
    color: #000;
  }
}