@use '../../colors';
@use '../../breakpoints';

.bz-footer {
    &__top {
        border-top: 4px solid colors.$pink-light;
    }
    &__content {
        background-image: url(../../assets/img/footer-bg.svg);
        background-position: center;
        background-repeat: repeat;
    }
    &__bazza-fau {
        margin-top: 0.91rem;
    }
    &__help-links {
        display: flex;
        gap: 4rem;
        font-size: 1.5rem;
    }
    &__menu-links {
        display: flex;
        gap: 2rem;
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 2rem;
    }
    &__social {
        display: flex;
        gap: 1rem;
        a {
            float: left;
            text-decoration: none;
        }
    }
    &__copyright {
        display: block;
        text-align: center;
    }
}

@media (max-width: breakpoints.$desktop) {
    .bz-footer {
        &__content {
            background-image: url(../../assets/img/footer-bg-mobile.svg);
        }
        &__bazza {
            margin: 0;
            width: 75%;
        }
        &__bazza-fau {
            margin: 0;
            width: 65%;
        }
        &__help-links {
            font-size: 1rem;
            gap: 2rem;
        }
        &__menu-links {
            margin-top: 0;
            flex-direction: column;
            align-items: start;
            gap: 1.5rem;
            font-size: 1.125rem;
            font-weight: 700;
        }
        &__social {
            margin-bottom: 2rem;
        }
        &__copyright {
            text-align: right;
            font-size: 1rem;
        }
    }
}