.footer-section,
.credits-section {
    display: flex;
    justify-content: center;
    position: relative;
    background-color: var(--color-muted-black);
    color: var(--color-footer-grey);
    padding: 0 var(--side-padding);
}

.footer-container,
.credits-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem;
    border-bottom: 2px solid var(--color-footer-dark-grey);
    width: 100%;
    flex-direction: column;
}


.footer-container {
    border-bottom: 2px solid var(--color-footer-dark-grey);
    padding: 2.5rem 0 2rem 0;
}

.credits-container {
    padding: 1.5rem 0;
    font-size: var(--default-secondary-font-size);
    gap: 1.5rem;
}

.footer-container:last-child {
    gap: 1rem;
}


.credits-container .footer-item:first-child {
    flex-direction: column;
    align-items: start;
    gap: 1rem;
}

.footer-item {
    display: flex;
    align-items: end;
    justify-content: space-between;
}


.footer-item:first-child {
    gap: 2rem;
}

.footer-item:nth-child(2) {
    gap: 1.5rem;
}


.footer-item a {
    color: var(--color-footer-grey);
}

.footer-item .organizer {
    display: flex;
    flex-direction: column;
}

.footer-image-container:first-child img {
    filter: brightness(0) saturate(100%) invert(60%);
    height: 2.75rem;

}

.footer-image-container:last-child img {
    filter: brightness(0) saturate(100%) invert(60%);
    height: 1.75rem;

}

.footer-social-icons {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.footer-social-icons i {
    font-size: 1.5rem;
    transition: color 0.3s ease;
    cursor: pointer;
}

.footer-social-icons i:hover {
    color: var(--color-yellow);
}

/* Footer Links */
.footer-links {
    display: flex;
    gap: 2rem;
    justify-content: center;
}

.footer-links div {
    cursor: pointer;
    transition: color 0.3s ease;
}

.footer-links div:hover {
    color: var(--color-bright-blue);
}

.footer-bottom {
    text-align: center;
    margin-top: 2rem;
    opacity: 0.7;
}

/*--------------------------------------------------------------
# Tablet View (≥ 768px)
--------------------------------------------------------------*/
@media (min-width: 576px) {

    .footer-container,
    .credits-container {
        flex-direction: row;
    }

    .credits-container .footer-item:first-child {
        flex-direction: row;
        align-items: start;
        gap: 2rem;
    }
}

/*--------------------------------------------------------------
# Large Desktop View (≥ 1200px)
--------------------------------------------------------------*/

@media (min-width: 1200px) {

    .footer-container,
    .credits-container {
        flex-direction: row;
    }

    .credits-container {
        gap: unset;
    }

    .footer-container {
        padding: 3.5rem 0;
    }

    .footer-image-container:first-child img {
        height: 3.4rem;

    }

    .footer-image-container:last-child img {
        height: 2.25rem;
    }

    .footer-social-icons {
        margin-top: 0;
    }
}