.metro-footer{background:var(--metro-primary);color:#fff;padding:88px 0 16px}
.metro-footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr .7fr;gap:40px}
.metro-footer p{color:rgba(255,255,255,.82)}
.metro-newsletter{display:flex;border:1px solid rgba(255,255,255,.14);border-radius:var(--metro-pill);padding:5px;margin-top:22px}
.metro-newsletter input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:#fff;padding:0 14px}
.metro-newsletter button{border:0;border-radius:var(--metro-pill);background:var(--metro-accent);padding:10px 17px;font-weight:700;text-transform:uppercase;cursor:pointer}
.metro-footer-links h3,.metro-footer-social h3{font-size:1.05rem}
.metro-footer-links a,.metro-footer-links span[aria-disabled]{display:block;color:rgba(255,255,255,.62);margin:7px 0}
.metro-footer-links a:hover{color:var(--metro-accent)}
.metro-social{display:flex;gap:9px}
.metro-social a{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1)}
.metro-copyright{margin-top:56px;padding-top:17px;border-top:1px solid rgba(255,255,255,.1);text-align:center;color:rgba(255,255,255,.5);font-size:.78rem}
@media(max-width:900px){.metro-footer{padding-top:62px}.metro-footer-grid{grid-template-columns:1fr 1fr}.metro-footer-intro{grid-column:1/-1}}
@media(max-width:620px){.metro-footer-grid{grid-template-columns:1fr;text-align:center}.metro-social{justify-content:center}}
.metro-social-letter {
    display: inline-grid;
    place-items: center;
    width: 1rem;
    height: 1rem;
    font-family: Arial, sans-serif;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1;
    text-transform: lowercase;
}

.social-text-icon {
    display: grid;
    place-items: center;

    width: 18px;
    height: 18px;

    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;

    line-height: 1;

    color: #fff;
}


/* Instagram icon without external icon library */
.instagram-icon {
    position: relative;

    display: block;

    width: 16px;
    height: 16px;

    border: 2px solid #fff;
    border-radius: 5px;
}

.instagram-icon::before {
    content: "";

    position: absolute;

    width: 5px;
    height: 5px;

    left: 50%;
    top: 50%;

    border: 1.7px solid #fff;
    border-radius: 50%;

    transform: translate(-50%, -50%);
}

.instagram-dot {
    position: absolute;

    width: 2.5px;
    height: 2.5px;

    top: 2px;
    right: 2px;

    border-radius: 50%;

    background: #fff;
}
