:host {
    display: block;
    margin-top: 20px;
    max-width: 1400px;
    align-self: center;
    width: 100%;
}

footer {

    .separator {
        background-color: var(--glass-surface);
        border-top-right-radius: 5px;
        border-top-left-radius: 5px;
        backdrop-filter: blur(2px);
        padding: 10px;
        color: var(--ui-surface-bg);
        border-top: 3px double var(--glass-surface);
        border-left: 3px double var(--glass-surface);
        border-right: 3px double var(--glass-surface);

        & a {
            &:link,
            &:hover,
            &:visited {
                color: var(--ui-surface-bg);
            }
        }
    }

    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    box-shadow: 0 0 10px var(--ui-hover-fg);

    .content {
        background-color: var(--ui-surface-bg);
        padding: 5px 5px 20px 5px;
        box-sizing: border-box;
        border-left: 3px double var(--primary-surface);
        border-right: 3px double var(--primary-surface);

        & .footer-section {
            h2 {
                margin: 0;
            }

            & .banners {
                display: flex;
                flex-wrap: wrap;
                flex-direction: row;
                gap: 4px;
                margin: 4px 0;

                & img {
                    display: inline-block;
                    height: 31px;
                    image-rendering: pixelated;
                }
            }
        }
    }
}