.site-footer {
    font-size: 15px;
}

.basic-footer__wrapper {
    background: linear-gradient(to right, var(--theme-dark-blue), var(--theme-light-blue));
    /* #1e3c60; */
    /* border-bottom: 10px solid #ffb738; */
    position: relative;
    overflow: hidden;
}
.basic-footer a {
    color: white;
}
.basic-footer {
    color: white;
    padding: 0;
    max-width: var(--page-max-width);
    
    display: grid;
    grid:
        "icon content flag" min-content
        / minmax(25%, 1fr) minmax(auto, max-content) minmax(25%, 1fr);
    gap: 10px 15px;
    justify-items: end;
    margin: auto;
}
.basic-footer__logo {
    grid-area: icon;
    align-self: center;
    justify-self: center;
    position: relative;
    z-index: 0;
    height: 100%;

    display: flex;
    align-items: center;
    width: 100%;
    /* justify-content: center; */
    padding-left: 15px;
}
.basic-footer__logo a {
    background-position: center;
}
.basic-footer__content {
    grid-area: content;
    display: flex;
    flex-direction: column;
    padding: 15px 0;
}
.basic-footer__content > * {
    margin: 5px;
}
.basic-footer__flag {
    grid-area: flag;
    align-self: end;
    text-align: center;
}
.basic-footer__flag img {
    max-height: 100%;
    margin-bottom: -5px;
}

/* .basic-footer__logo {
    translate: 
} */
.basic-footer__logo :is(.citySeal, .cityLogo) {
    overflow: visible;
}
.basic-footer__logo .citySeal {
    position: relative;
    flex-shrink: 0;
}
.basic-footer__logo .citySeal::before {
    --line-width: 400px;
    content: '';
    position: absolute;
    height: 11px;
    width: var(--line-width);
    background: linear-gradient(90deg, rgba(213, 162, 74, 0) 0%, rgba(213, 162, 74, 1) 50%, rgba(213, 162, 74, 0) 100%);;

    bottom: 15px;
    margin-left: calc(50% - var(--line-width)/2);
    z-index: -1;
}


.basic-footer__logo::after {
    content: '';
    position: absolute;
    --triangle-color-rgb: 255, 255, 255;
    top: 0;
    left: -35px;
    aspect-ratio: 1/1;
    height: 100%;
    /* var(--triangle-size, 200px); */
    clip-path: polygon(0 0, 0% 100%, 100% 100%);
    z-index: -1;
    background: linear-gradient(-90deg,
        rgba(var(--triangle-color-rgb), 0.3),
        rgba(var(--triangle-color-rgb), 0)),

        linear-gradient(-135deg,
            rgba(var(--triangle-color-rgb), 0.4),
            rgba(var(--triangle-color-rgb), 0.4) 50%,
            rgba(var(--triangle-color-rgb),0) calc(50% + 3px),
            rgba(var(--triangle-color-rgb),0));
}
@media screen and (max-width: 1200px) {
    .basic-footer__logo .cityLogo {
        display: none;
    }
    .basic-footer__logo .citySeal::before {
        --line-width: 250px;
    }
    .basic-footer__flag {
        display: none;
    }
    .basic-footer {
        grid:
            "icon content" min-content
            / 25% 1fr;
    }
    .basic-footer__content {
        padding-right: 15px;
    }
}
@media screen and (max-width: 800px) {
    .basic-footer__logo::after {
        display: none;
    }
    .basic-footer__logo {
        align-items: center;
        padding-bottom: 15px;
        justify-content: center;
        padding-left: 0;
    }
    .basic-footer {
        grid:
            "content" min-content
            "icon" min-content
            / 1fr;
        padding: 0 15px;
    }
    .basic-footer__logo .citySeal::before {
        --line-width: 400px;
    }
}

/* @media screen and (max-width: 330px) {
    .basic-footer {
        display: grid;
        grid:
            "content" max-content
            "icon" min-content
            / 1fr;
        justify-content: center;
    }
    .basic-footer__logo {
        justify-self: center;
    }
} */