body {
    footer {
        background-color: var(--background-secondary);
        padding: 3%;

        h1, h2, h3, h4, p {
            color: var(--paragraph-secondary);
        }

        a {
            color: var(--paragraph-secondary);
            opacity: .5;
            text-decoration: none;

            &:hover {
                text-decoration: none;
                opacity: 1;
            }
        }

        #inner-footer {
            width: 100%;
            display: grid;
            grid-template-columns: 60% 40%;
            grid-template-areas:
                    "logo logo"
                    "links links"
                    "terms socials"
                    "copyright copyright";

            @media screen and (max-width: 767px) {
                grid-template-columns: 100%;
                grid-template-areas:
                    "logo"
                    "links"
                    "terms"
                    "socials"
                    "copyright";
            }

            #f-logo {
                grid-area: logo;
                padding: 1.5% 0;

                @media screen and (max-width: 767px) {
                    padding: 2.5% 0;
                }

                @media screen and (max-width: 480px) {
                    padding: 10% 0;
                }

                a {
                    width: 20%;
                    opacity: 1;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    transition: .25s ease;

                    img {
                        width: 100%;
                    }

                    &:hover {
                        opacity: .5;
                    }

                    @media screen and (max-width: 1200px) {
                        width: 25%;
                    }

                    @media screen and (max-width: 979px) {
                        width: 30%;
                    }

                    @media screen and (max-width: 767px) {
                        width: 40%;
                    }

                    @media screen and (max-width: 480px) {
                        width: 60%;
                    }
                }
            }

            #f-links {
                grid-area: links;
                padding: 1.5% 0;

                display: flex;
                flex-wrap: wrap;

                .f-link-section {
                    width: 16.666%;
                    margin-bottom: 5%;

                    h4 {
                        margin-bottom: 10%;
                    }

                    p {
                        font-size: 1.05em;
                        margin-bottom: 1.5%;
                    }

                    @media screen and (max-width: 1200px) {
                        width: 20%;
                    }

                    @media screen and (max-width: 979px) {
                        width: 25%;
                    }

                    @media screen and (max-width: 767px) {
                        width: 50%;

                        h4 {
                            margin-bottom: 5%;
                        }
                    }

                    @media screen and (max-width: 480px) {
                        width: 100%;
                        margin-bottom: 10%;

                        h4 {
                            margin-bottom: 2.5%;
                        }
                    }
                }
            }

            #f-terms {
                grid-area: terms;
                padding: 1.5% 0;
                display: flex;
                align-items: center;

                p {
                    font-size: 1.05em;
                }
            }

            #f-socials {
                grid-area: socials;
                padding: 1.5% 0;

                display: flex;
                justify-content: flex-end;
                align-items: center;

                @media screen and (max-width: 767px) {
                    padding: 7.5% 0;
                    justify-content: flex-start;
                }

                .f-social {
                    aspect-ratio: 1/1;
                    width: 6%;
                    opacity: 1;
                    transition: .25s ease;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-left: 2.5%;

                    @media screen and (max-width: 1200px) {
                        width: 8%;
                    }

                    @media screen and (max-width: 979px) {
                        width: 5%;
                    }

                    @media screen and (max-width: 480px) {
                        width: 8%;
                    }

                    img {
                        aspect-ratio: 1/1;
                        width: 90%;
                    }

                    &:hover {
                        opacity: .5;
                    }
                }
            }

            #f-copyright {
                grid-area: copyright;
                padding: 1.5% 0;
            }
        }
    }
}