/* =========================================================
   FOOTER
========================================================= */

.site-footer {
    padding: 55px 38px 18px;
    background-color: var(--dark);
    background-image: url("../images/footer.svg");
    color: var(--white);
}

.footer-inner {

    display:
        grid;

    grid-template-columns:
        2fr 1fr 1fr 1fr;

    gap:
        35px;

    padding-bottom:
        35px;

    border-bottom:
        1px solid
        rgba(255,255,255,0.12);

}

.footer-logo .logo-main {

    color:
        var(--pink);

}

.footer-logo .logo-sub {

    color:
        var(--mint);

}

.footer-brand p {

    max-width:
        250px;

    margin-top:
        16px;

    color:
        rgba(255,255,255,0.55);

    font-size:
        0.78rem;

}

.footer-column {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

}

.footer-column h3 {

    margin-bottom:
        7px;

    font-family:
        "Pontano Sans",
        sans-serif;

    font-size:
        0.68rem;

    text-transform:
        uppercase;

    letter-spacing:
        0.13em;

    color:
        var(--pink);

}

.footer-column a {

    color:
        rgba(255,255,255,0.55);

    font-size:
        0.77rem;

    transition:
        color 0.2s ease;

}

.footer-column a:hover {

    color:
        var(--white);

}

.footer-bottom {

    padding-top:
        17px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    color:
        rgba(255,255,255,0.3);

    font-size:
        0.68rem;

}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 900px) {

.footer-inner {

        grid-template-columns:
            1fr 1fr;

    }

.site-footer {

        background-image:
            url("../images/footer-tablet.svg");

    }

}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 700px) {

.site-footer {
        background-image: url("../images/footer-mobil.svg");
        background-repeat: no-repeat;
        background-position: center top;
        
    }

.footer-inner {

        grid-template-columns:
            1fr 1fr;

        gap:
            28px;

    }

.site-footer {

        padding:
            45px 25px 18px;

    }

.footer-bottom {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            5px;

    }

}