/*
    Footer 
*/

.footer {
    padding: 6rem 1rem 1.5rem 1rem;
}

.footer.black {
    background-color: black;
    color: white;
}

footer .footer-socialmedia,
footer .footer-contacts,
footer .footer-socialmedia-content,
footer .footer-upcoming,
footer .footer-upcoming-news,
footer .footer-contacts-content {
    display: none;
}

.footer-credits {
    grid-column: 1/-1;
    margin-top: 2rem;
}

.footer-socialmedia-content,
.footer-contacts-content {
    padding: 0.15rem 0;
}

.footer-socialmedia-content li,
.footer-contacts-content li {
    margin-bottom: 0.65rem;
    line-height: 1.1em;
}

/* Tablet */
@media only screen and (min-width: 48rem) {
    .footer {
        padding: 12rem 1rem 1rem 1rem;
    }

    footer .footer-socialmedia,
    footer .footer-contacts,
    footer .footer-socialmedia-content,
    footer .footer-upcoming,
    footer .footer-upcoming-news,
    footer .footer-contacts-content {
        display: block;
    }
}


/* Footer Elements */
.footer-upcoming {
    grid-column: 1/3;
}

.footer-upcoming-news {
    grid-column: 3/-1;
}

.footer-upcoming-post:first-child{
    margin-bottom: 1rem;
}

ul.footer-socialmedia-content,
ul.footer-contacts-content,
.footer-upcoming-post-title {
    letter-spacing: 0.02rem;
}

.footer-upcoming-post a,
.footer-socialmedia-content a:hover,
.footer-contacts-content a:hover {
    text-decoration: underline;
}

/* Tablet */
@media only screen and (min-width: 48rem) {
    footer .footer-socialmedia {
        grid-column: 1/3;
    }

    footer .footer-socialmedia-content{
        grid-column: 3/6;
    }

    footer .footer-contacts {
        grid-column: 6/8;
    }

    footer .footer-contacts-content {
        grid-column: 8/11;
    }
}

/* Desktop */
@media only screen and (min-width: 64rem) {
    footer .footer-socialmedia {
        grid-column: 1/-12;
    }
    
    footer .footer-socialmedia-content {
        grid-column: -12/-10;
    }
    
    footer .footer-contacts {
        grid-column: 4/-9;
    }
    
    footer .footer-contacts-content {
        grid-column: -9/-7;
    }

    .footer-upcoming {
        grid-column: 7/-6;
    }
    
    .footer-upcoming-news {
        grid-column: -6/-1;
    }
}