footer {
    background-color: #f5f5f7;
    justify-content: space-around;
    p {
        color: #b8b8bb;
    }
    .links {
        display: flex;
        justify-content: center;
        padding: 15px 0;
        img {
            height: 23px;
            margin: 0 10px;
            filter: grayscale(100%);
        }
        img:hover {
            filter: grayscale(0%);
        }
        > div:hover .email {
            color: #f44336;
            filter: grayscale(0%);
            height: 30px;
        }
        > div:hover .linkedin {
            color: #1975d2;
            filter: grayscale(0%);
            height: 30px;
        }
        > div:hover .instagram {
            color: #a229a8;
            filter: grayscale(0%);
            height: 30px;
        }
        > div:hover .github {
            color: #6472c3;
            filter: grayscale(0%);
            height: 30px;
        }
        > div:hover .facebook {
            color: #1975d2;
            filter: grayscale(0%);
            height: 30px;
        }
    }
    .icon-name {
        display: none;
    }
    .powered-by:hover {
        color: black;
    }
    a {
        text-decoration: none;
    }
    .name-countries {
        padding: 5px 0;
    }
    .countries {
        display: flex;
        justify-content: center;
        padding-bottom: 10px;
        button {
            background-color: transparent;
            border: none;
        }
        img {
            height: 23px;
            margin: 0 2px;
            margin: 0 10px;
            filter: grayscale(30%);
        }
        img:hover {
            height: 30px;
            /* filter: grayscale(0%); */
        }
    }
}

@media (min-width: 450px) {
    footer {
        .links {
            display: flex;
            justify-content: space-around;
            padding: 10px 100px;
            img {
                height: 40px;
            }
            img:hover {
                height: 40px;
            }
        }
        img {
            height: 30px;
            margin: 0 10px;
        }
        .name-countries {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0px 190px;
        }
        .countries {
            display: flex;
            justify-content: space-around;
            padding-bottom: 20px;
            img {
                height: 40px;
                margin: 0 10px;
            }
            img:hover {
                height: 40px;
            }
        }
        .icon-name {
            display: initial;
        }
    }
}
