lostplaces-frontend/components/03_Organisms/footer/_footer.scss

// Define easily accessible color-defalts for the footer.
$primary-link-color: $-beige;
$primary-line-color: $-almost-white;

.LP-Footer {
    margin: auto;
    background: $-grey;
    width: 100%;
    font-family: $-primary-sans-serif-font;
    font-size: 0.75rem;

    * {
        box-sizing: border-box
    }

    ul {
        list-style: none
    }

    a {
        text-decoration: none
    }

    &__generic-anchor {
        color: $primary-link-color;
        &:hover {
            color: $primary-line-color
        }
    }

    // Use flexbox
    &__flex {
        display: flex;
        flex-flow: row wrap;
    }

    &__list-top {
        width: 33.333%
    }

    &__list-top > li {
        text-align: center;
        padding-bottom: 10px
    }

    &__list-header {
        padding: 10px 0 5px 0;
        color: $-almost-white;
        font-size: 2.3vw;
    }

    &__list-anchor {
        font-size: 1.3em;
    }

    &__social-section {
        width: 100%;
        align-items: center;
        justify-content: space-around;
        position: relative;
        margin-top: 5px;
    }

    &__social-section::after {
        content: "";
        position: absolute;
        z-index: 1;
        top: 50%;
        left: 10px;
        border-top: 1px solid $primary-line-color;
        width: calc(100% - 20px)
    }

    &__social-overlap {
        position: relative;
        z-index: 2;
        background: $-grey;
        padding: 0 20px;
    }

    // Big letters of "EXPLORE WITH US"
    &__social-explore {
        display: flex;
        align-items: center;
        font-size: 3.5em;
        color: $-almost-white
    }

    // Small letters of "EXPLORE WITH US"
    &__social-small {
        font-size: 0.6em;
        padding: 0px 20px
    }

    &__social-overlap > a {
        font-size: 3em
    }

    &__social-overlap > a:not(:first-child) {
        margin-left: 0.38em
    }

    &__bottom-section {
        width: 100%;
        padding: 10px;
        border-top: 1px solid $primary-line-color;
        margin-top: 10px
    }

    &__bottom-section > div:first-child {
        margin-right: auto
    }

    &__bottom-wrapper {
        font-size: 1.5em;
        color: $-almost-white
    }

    // Media queries using global widths.
    @media(max-width: $-viewport-normal) {
        .LP-Footer__list-header {
            font-size: 2em
        }
        .LP-Footer__list-anchor {
            font-size: 1.1em
        }
        .LP-Footer__social-connect {
            font-size: 2.5em
        }
        .LP-Footer__social-overlap > a {
            font-size: 2.24em
        }
        .LP-Footer__bottom-wrapper {
            font-size: 1.3em
        }
    }

    @media(max-width: $-viewport-medium) {
        .LP-Footer__list-top {
            width: 100%
        }
        .LP-Footer__list-header {
            font-size: 3em;
        }
        .LP-Footer__list-anchor {
            font-size: 1.5em
        }
        .LP-Footer__social-section {
            justify-content: center
        }
        .LP-Footer__social-section::after {
            top: 25%
        }
        .LP-Footer__social-connect {
            margin-bottom: 10px;
            padding: 0 10px
        }
        .LP-Footer__social-overlap {
            display: flex;
            justify-content: center;
        }
        .LP-Footer__social-icons-wrapper {
            width: 100%;
            padding: 0
        }
        .LP-Footer__social-overlap > a:not(:first-child) {
            margin-left: 20px;
        }
        .LP-Footer__bottom-section {
            padding: 0 5px 10px 5px
        }
        .LP-Footer__bottom-wrapper {
            text-align: center;
            width: 100%;
            margin-top: 10px
        }
    }

    @media(max-width: $-viewport-small) {
        .LP-Footer__social-overlap > a {
            margin: auto
        }
        .LP-Footer__social-overlap > a:not(:first-child) {
            margin-left: 0;
        }
        .LP-Footer__bottom-rights {
            display: block
        }
    }

    @media(max-width: $-viewport-extra-small) {
        .LP-Footer__list-header {
            font-size: 2.2em
        }
        .LP-Footer__list-anchor {
            font-size: 1.2em
        }
        .LP-Footer__social-connect {
            font-size: 2.4em
        }
        .LP-Footer__social-overlap > a {
            font-size: 2.24em
        }
        .LP-Footer__bottom-wrapper {
            font-size: 1.3em
        }
    }
}