@import "/src/styles/mixins.scss";
@import "/src/styles/vars.scss";

#join-community {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2em;
    padding: 5em 7.5%;
    background: $color-aquamarine;
    color: $color-blue-charcoal-2;
    @include fluid-font-size(0.625rem);

    div {
        flex-grow: 1;

        &:first-child {
            flex-grow: 10;
        }

        &:last-child {
            flex-grow: 0;
        }
    }

    @media screen and (max-width: 56rem) {
        flex-wrap: wrap;
        justify-content: center;

        div:first-child {
            flex-basis: 100%;
            margin-bottom: 2em;
            text-align: center;
        }

        div {
            flex-grow: 0;
        }
    }

    h2 {
        margin-bottom: 0.25em;
        @include fluid-font-size(2rem);
        font-weight: 700;
        line-height: 153%;
        text-transform: none;
        color: inherit;
    }

    p {
        font-family: $font-family-jaldi;
        @include fluid-font-size(1.5rem);
        line-height: 157%;
    }

    a {
        display: block;
        color: #0B3F48;

        &:hover {
            color: inherit;
        }
    }

    .github-logo svg {
        @include fluid-width(3.625rem);
    }

    .git-logo svg {
        @include fluid-width(3.625rem);
    }

    .discord-logo svg {
        @include fluid-width(3.625rem);
    }

    .twitter-logo svg {
        @include fluid-width(3.625rem);
    }
}
