footer {
    background-color: var(--color-primary);
    border-top: 0.5vh solid var(--color-grey);

    border-bottom: 0.5vh solid var(--color-grey);

    box-shadow:
            0 -10px 10px -10px rgba(0, 0, 0, 0.5), /* Top shadow */
            0  10px 10px -10px rgba(0, 0, 0, 0.5); /* Bottom shadow */
}

footer .__container {
    padding: var(--spacing-md);
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

@media (min-width: 768px) {
    footer .__container {
        flex-direction: row;
        justify-content: space-between;
    }
}

footer .__brand {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    font-size: 0.95rem;
}
footer .__brand img {
    width: 24px;
    height: 24px;
}

footer h3 {
    color: var(--color-text-white);
}

footer span {
    color: var(--color-text-white);
}

footer .__socials {
    display: flex;
    gap: var(--spacing-sm);
}

footer .__socials a {
    width: 24px;
    height: 24px;
    display: block;
    opacity: 0.9;
    transition: opacity 0.2s;
}

footer .__socials a:hover {
    opacity: 1;
}

footer .__socials img {
    width: 100%;
    height: 100%;
}

footer .__top-graphic {
    border-bottom: 0.5vh solid var(--color-grey);
    /* Dynamic sizing */
    width: 100%;
    height: 5vh; /* Adjust this to change the overall thickness of the header */

    /*
     * The clip-path polygon points map out the shape clockwise starting from the top-left:
     * 1. 0% 0%       -> Top-left corner
     * 2. 100% 0%     -> Top-right corner
     * 3. 100% 50%    -> Bottom-right corner (determines the thinness of the right side)
     * 4. 65% 50%     -> Start of the upward slope on the right
     * 5. 60% 100%    -> End of the upward slope on the left
     * 6. 0% 100%     -> Bottom-left corner
     */
    /* clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 40% 50%, 35% 83%, 0% 83%);*/
    /* clip-path: polygon(0% 35%, 60% 35%, 70% 0%, 100% 0%, 100% 100%, 0% 100%) */
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);

    background-color: var(--color-primary);

}