.footer {
    background-color: var(--dark-blue);
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1em 0 2em 0;
    gap: 3em;

    .divider-line {
        width: 100px;
        height: 2px;
        background-color: white;
        align-self: center;
    }

    .to-reverse {
        display: flex;
        flex-direction: column;
        gap: 1em;

        .logo {
            display: none;
        }
    }

    .komunikace {
        display: flex;
        flex-direction: column;
        gap: 1em;

        .column {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1em;

            .line {
                display: flex;
                justify-content: space-evenly;
                gap: 1em;
            }

            .number {
                color: white !important;
                text-decoration: none !important;
            }
        }
    }

    .links {
        display: flex;
        flex-direction: column;
        gap: 0.5em;
        align-items: center;
        
        a {
            color: white;
            letter-spacing: 0.1em;
        }
    }

    .provozovatel {
        text-align: center;
    }
}

@media (max-width: 767px) {
    .links {
        align-items: start !important;
    }
    
}

@media (min-width: 768px) {
    .footer {
        .to-reverse {
            flex-direction: column-reverse;
            gap: 3em;
            width: 100%;

            .links {
                position: relative;
                flex-direction: row;
                justify-content: center;
                gap: 1em;
                width: 100%;

                .logo {
                    display: inline;
                    position: absolute;
                    filter: invert(1);
                    left: 10;
                }
            }

            .komunikace {
                flex-direction: row;
                justify-content: center;
                align-items: center;

                .divider-line {
                    height: 50px;
                    width: 2px;
                }
            }
        }

        .to-hide {
            display: none;
        }
    }
}