@use "variables";

.footer {
    margin-top: 40px;
    text-align: center;
    color: variables.$white;
    background: linear-gradient(to bottom left, variables.$primary-color, variables.$primary-color-light);
    clear: both;

    .footer-text,
    .footer-link {
        display: inline-block;
        padding: 40px;
    }

    .footer-text {
        padding-bottom: 0;

        .hearts {
            font-size: 18px;
            color: variables.$primary-color-dark;
        }
    }

    .footer-link {
        text-decoration: none;
        color: variables.$white;
        transition: color 0.15s;

        &:hover,
        &:focus {
            color: variables.$primary-color-dark;
        }
    }
}
