/* 
    Footer 
*/

.footer {
    display: block;
    padding: 0.875rem 0.5rem;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}

.footer.hidden {
    display: none;
}

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

/* Desktop */
@media only screen and (min-width: 64rem) {
    .footer {
        padding: 0.875rem 2rem;
    }
}

/* 
    Footer Sections 
*/

/* Footer Category */
.footer-project-category {
    grid-column: 1/-1 ;
    grid-row: 2;
}

.footer-project-category-list-item {
    position: relative;
    margin: 0 0 0.5rem;
    grid-row: 1;
}

.footer-project-category-list-item:not(:last-child) {
    margin: 0 1rem 0 0;
}

.footer-project-category-list-item-button * {
    pointer-events: none;
}

.footer-project-category-list-item-button {
    filter: opacity(0.7);
}

.footer-project-category-list-item-button:hover,
.footer-project-category-list-item-button:hover .bullet-dot,
.footer-project-category-list-item-button.active,
.footer-project-category-list-item-button.active .bullet-dot {
    filter: opacity(1);
}

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

/* Desktop */
@media only screen and (min-width: 64rem) {
    .footer-project-category {
        grid-column: 1/-5 ;
        grid-row: 1;
    }
}

/* Footer Index */
.footer-project-index {
    margin: 0.5rem 0 0;
}

.footer-project-index-list-item {
    position: relative;
}

.footer-project-index-list-item:last-child {
    margin: 0 0 0 1rem;
}

.footer-project-index-list-item:hover,
.footer-project-index-list-item.inactive:hover,
.footer-project-index-list-item:hover .bullet-dot {
    filter: opacity(1);
}

.footer-project-index-list-item.inactive {
    filter: opacity(0.7);
}

/* Tablet */
@media only screen and (min-width: 48rem) {
    .footer-project-index {
        grid-column: -6/-1 ;
        justify-self: end;
        margin: 0;
    }

    .footer-project-index-list  {
        justify-content: end;
    }
}

/* Desktop */
@media only screen and (min-width: 64rem) {
    .footer-project-index {
        grid-column: -5/-1 ;
        margin: 0;
    }

    .footer-project-index-list-item {
        margin: 0;
    }
}