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

// Define easily accessible color-defaults 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: 1rem;

    &Columns__Container {
        @include RV-BreakPoint;
        --breakPoint: 750px;
        justify-content: center;
    }

    &Columns__Item {
        @include RV-BreakPoint__Item;
    }

    * {
        box-sizing: border-box;
    }

    ul {
        list-style: none;
    }

    a {
        text-decoration: none;
    }

    &__GenericAnchor {
        color: $-primary-link-color;

        &:hover {
            color: $-primary-line-color;
        }
    }

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

    &__ListTop {
        text-align: left;
    }

    &__ListTop > li {
        padding-bottom: 10px;
    }

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

    &__ListText {
        font-size: 1.2em;
        color: $-almost-white;
    }

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

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

    // Include social media icons.
    .LP-Footer__Social-Mastodon {
        .LP-Footer__Icon {
            background-image: url('icons/social/mastodon.svg');
        }
    }

    .LP-Footer__Social-Twitter {
        .LP-Footer__Icon {
            background-image: url('icons/social/twitter.svg');
        }
    }

    .LP-Footer__Social-Facebook {
        .LP-Footer__Icon {
            background-image: url('icons/social/facebook.svg');
        }
    }

    .LP-Footer__Social-Youtube {
        .LP-Footer__Icon {
            background-image: url('icons/social/youtube.svg');
        }
    }

    .LP-Footer__Social-Vimeo {
        .LP-Footer__Icon {
            background-image: url('icons/social/vimeo.svg');
        }
    }

    .LP-Footer__Social-Instagram {
        .LP-Footer__Icon {
            background-image: url('icons/social/instagram.svg');
        }
    }

    .LP-Footer__Social-Vkontakte {
        .LP-Footer__Icon {
            background-image: url('icons/social/vkontakte.svg');
        }
    }

    .LP-Footer__Social-Wordpress {
        .LP-Footer__Icon {
            background-image: url('icons/social/wordpress.svg');
        }
    }

    // Social media icons style.
    .LP-Footer__Icon {
        background-size: 40px 40px;
        background-repeat: no-repeat;
        background-position: center;
        background-clip: content-box;
        position: absolute;
        height: 50px;
        width: 50px;
    }

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

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

    &__SocialOverlap {
        position: relative;
        z-index: 2;
        background: $-grey;
        padding: 0 10px;
    }

    &__SocialOverlap > a {
        font-size: 3em;
        padding-right: 50px;
    }

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

    &__BottomSection > div:first-child {
        margin-right: auto;
    }

    &__BottomWrapper {
        font-size: 1.3em;
        color: $-almost-white;
    }
}

// Media queries using global widths.
@media(max-width: $-viewport-normal) {
    .LP-Footer__ListHeader {
        font-size: 2em;
    }
    .LP-Footer__ListText {
        font-size: 1.1em;
    }
    .LP-Footer__SocialConnect {
        font-size: 2.5em;
    }
    .LP-Footer__SocialOverlap > a {
        font-size: 2.24em;
        height: 50px;
    }
    .LP-Footer__BottomWrapper {
        font-size: 1.3em;
    }
}

@media(max-width: $-viewport-medium) {
    .LP-Footer__ListHeader {
        font-size: 3em;
    }
    .LP-Footer__ListText {
        font-size: 1.5em;
    }
    .LP-Footer__SocialSection {
        justify-content: center
    }
    .LP-Footer__SocialSection::after {
        top: 25%;
    }
    .LP-Footer__SocialConnect {
        margin-bottom: 10px;
        padding: 0 10px;
    }
    .LP-Footer__SocialOverlap {
        display: flex;
        justify-content: center;
        height: 50px;
    }
    .LP-Footer__SocialIconsWrapper {
        width: 100%;
        padding: 0;
    }
    .LP-Footer__SocialOverlap {
        margin-left: 0px;
    }
    .LP-Footer__BottomSection {
        padding: 0 5px 10px 5px;
    }
    .LP-Footer__BottomWrapper {
        text-align: center;
        width: 100%;
        margin-top: 10px;
    }
}

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

@media(max-width: $-viewport-extra-small) {
    .LP-Footer__ListHeader {
        font-size: 2.2em;
    }
    .LP-Footer__ListText {
        font-size: 1.2em;
    }
    .LP-Footer__SocialConnect {
        font-size: 2.4em;
    }
    .LP-Footer__SocialOverlap > a {
        font-size: 2.24em;
    }
    .LP-Footer__BottomWrapper {
        font-size: 1.3em;
    }
}