footer {

    .contact-cta,
    .footer-links {
        padding-left: var(--gutter);
        padding-right: var(--gutter);
    }

    .contact-cta {
        position: relative;
        margin-top: var(--spacing-04);

        &::after {
            content: '';
            background-color: var(--light-blue);
            height: 46px;
            position: absolute;
            left: 0px;
            bottom: 0px;
            right: 0px;
            z-index: 0;
        }

        .container {
            position: relative;
            z-index: 10;
            display: grid;
            grid-template-columns: 1fr;

            >.image {
                margin-top: -80px;
                order: 2;

                img {
                    -webkit-transform: scaleX(-1);
                    transform: scaleX(-1);
                }
            }

            .contact-cta__text {
                order: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                margin-bottom: var(--spacing-06);

                .contact-cta__quicklinks {
                    display: flex;
                    gap: 40px;
                    list-style: none;
                    padding: 0;

                    li {
                        position: relative;

                        &::after {
                            content: '';
                            width: 1px;
                            background-color: var(--line-gray);
                            position: absolute;
                            right: -20px;
                            top: -3px;
                            bottom: -3px;
                        }

                        &:last-child::after {
                            display: none;
                        }

                        a {
                            position: relative;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            overflow: visible;

                        }
                    }

                }
            }
        }
    }

    .footer-links {
        background-color: var(--dark-blue);

        * {
            color: #fff;
        }

        .container {
            display: grid;
            grid-template-columns: 3fr 2fr;
            gap: 0;


            .address {
                grid-column: 1 / span 2;
                grid-row: 1;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: var(--spacing-09);
                margin-bottom: var(--gutter);

                >figure.image {
                    >picture {
                        >img {
                            max-width: 52px;
                            height: auto;
                        }
                    }
                }

                p:last-child {
                    margin-bottom: 0px;
                }
            }

            .location {
                p {
                    white-space: nowrap;
                }
            }


            .location.oldenburg {
                grid-column: 1;
                grid-row: 2;
                margin-bottom: var(--gutter);
            }

            .location.bremen {
                grid-column: 2;
                grid-row: 2;
                margin-bottom: var(--gutter);
            }

            .location.friesoythe {
                grid-column: 1;
                grid-row: 3;
            }

            .mainnav {
                grid-column: 2;
                grid-row: 3;

            }

            .extranav {
                grid-column: 1;
                grid-row: 4;
            }

            .social-media {
                grid-column: 2;
                grid-row: 4;
                align-self: flex-end;

                ul {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    gap: var(--spacing-05);

                    li {
                        svg {
                            height: 100%;
                            width: 100%;
                            max-width: 16px;
                            max-height: 16px;
                        }
                    }
                }
            }


            >div,
            >nav {
                position: relative;

                >*:last-child {
                    margin-bottom: 0;
                }
            }

            >nav {
                ul {
                    display: flex;
                    flex-direction: column;
                    line-height: var(--line-height-p);
                }
            }
        }
    }
}

@media (min-width: 768px) {

    footer {

        .contact-cta,
        .footer-links {
            padding-left: var(--gutter);
            padding-right: var(--gutter);
        }

        .contact-cta {
            position: relative;
            margin-top: var(--spacing-04);
            padding-bottom: 86px;

            &::after {
                content: '';
                background-color: var(--light-blue);
                height: 86px;
                position: absolute;
                left: 0px;
                bottom: 0px;
                right: 0px;
                z-index: 0;
            }

            .container {
                position: relative;
                z-index: 10;
                display: grid;
                grid-template-columns: 1fr 1fr;

                >.image {
                    order: initial;
                    margin-top: initial;
                    img {
                        -webkit-transform: scaleX(1);
                        transform: scaleX(1);
                    }
                }
                .contact-cta__text {
                    order: initial;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    margin-bottom: 0;

                    .contact-cta__quicklinks {
                        display: flex;
                        gap: 50px;
                        list-style: none;
                        padding: 0;

                        li {
                            position: relative;

                            &::after {
                                content: '';
                                width: 1px;
                                background-color: var(--line-gray);
                                position: absolute;
                                right: -25px;
                                top: -5px;
                                bottom: -5px;
                            }

                            &:last-child::after {
                                display: none;
                            }

                            a {
                                position: relative;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                overflow: visible;
                                height: 20px;

                            }
                        }

                    }
                }
            }
        }

        .footer-links {
            background-color: var(--dark-blue);

            * {
                color: #fff;
            }

            .container {
                display: grid;
                grid-template-columns: 30% auto auto auto;
                grid-template-rows: auto;
                column-gap: calc(var(--gutter) * 2);

                .address {
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-start;
                    gap: var(--spacing-09);
                    grid-column: 1;
                    grid-row: 1 / span 3;
                    margin: 0;
                }

                .location.oldenburg,
                .location.bremen,
                .location.friesoythe {
                    display: grid;
                    grid-column: 2;
                    margin-bottom: 0;
                    p {
                        margin-bottom: var(--font-margin-p);
                    }   
                }

                .location.oldenburg {
                    grid-row: 1;
                }
                .location.bremen {
                    grid-row: 2;
                }
                .location.friesoythe {
                    grid-row: 3;
                }
                .location.last-element {
                    p {
                        margin-bottom: 0;
                    }
                }

                .mainnav {
                    grid-column: 3;
                    grid-row: 1 /span 3;
                }

                .extranav {
                    grid-column: 4;
                    grid-row: 1 /span 3;
                }

                .social-media {
                    grid-column: 1;
                    grid-row: 3;
                    ul {
                        display: flex;
                        align-items: center;
                        gap: var(--spacing-05);
                    }
                }
         
                >div,
                >nav {
                    position: relative;

                    &::after {
                        content: '';
                        display: block;
                        width: 1px;
                        position: absolute;
                        top: 0px;
                        bottom: 0px;
                        right: calc(var(--gutter) * -1);
                        background-color: #fff;
                    }

                    &:last-child::after {
                        display: none;
                    }

                    >*:last-child {
                        margin-bottom: 0;
                    }
                }

                >nav {
                    ul {
                        display: flex;
                        flex-direction: column;
                        line-height: var(--line-height-p);
                    }
                }
            }
        }
    }
}