@mixin h1 {
    font-weight: 700;
    font-size: rem(58px);
    color: $color-dark;

    @media (max-width: $breakpoint-s) {
        font-size: rem(48px);
    }
}

@mixin h2 {
    font-weight: 700;
    font-size: rem(42px);
    color: $color-dark;

    @media (max-width: $breakpoint-s) {
        font-size: rem(38px);
    }
}

@mixin h3 {
    font-weight: 700;
    font-size: rem(32px);
    color: $color-dark;
}

@mixin h4 {
    font-weight: 400;
    font-size: rem(24px);
    color: $color-dark;
}

@mixin text {
    font-size: rem(18px);
    font-weight: 400;
    color: $color-dark;

    @media (max-width: $breakpoint-xs) {
        font-size: rem(20px);
    }
}

@mixin btn {
    padding: 0 $base * 6;
    border-radius: $radius-sm;
    background: $color-purple;

    height: $base * 13;

    font-size: rem(16px);
    font-weight: 600;
    color: $color-white;

    display: flex;
    justify-content: center;
    align-items: center;

    white-space: nowrap;

    gap: $base * 3;
    transition: .2s ease;

    @media (max-width: $breakpoint-s) {
        font-size: rem(20px);
    }

    & img, svg {
        min-width: $base * 6;
        width: $base * 6;
        flex: 0 0 $base * 6;
        height: $base * 6;
        object-fit: contain;
    }

    &:hover {
        background: $color-purple-hover;
    }
}

@mixin social-link {

    font-size: rem(16px);
    font-weight: 400;
    color: $color-blue;

    display: flex;
    justify-content: center;
    align-items: center;

    white-space: nowrap;

    gap: $base;
    transition: .2s ease;

    & img, svg {
        min-width: $base * 5;
        width: $base * 5;
        flex: 0 0 $base * 5;
        height: $base * 5;
        object-fit: contain;

        & path {
            fill: $color-blue;
            transition: .2s ease;
        }
    }

    &:hover {
        color: $color-blue-hover;

        & svg path {
            fill: $color-blue-hover;
        }
    }
}

@mixin link {

    font-size: rem(20px);
    font-weight: 400;
    color: $color-purple;

    display: flex;
    justify-content: center;
    align-items: center;

    white-space: nowrap;

    gap: $base;
    transition: .2s ease;

    & img, svg {
        min-width: $base * 3;
        width: $base * 3;
        flex: 0 0 $base * 3;
        height: $base * 3;
        object-fit: contain;

        & path {
            fill: $color-purple;
            transition: .2s ease;
        }
    }

    &:hover {
        color: $color-purple-hover;

        & svg path {
            fill: $color-purple-hover;
        }
    }
}

@mixin heading {
    font-size: rem(24px);
    position: relative;

    &::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -1rem;
        width: $base * 9;
        height: 2px;
        background: $color-purple;
    }
}

@mixin p-margin {
    &:not(:last-child) {
        margin-bottom: $base * 2;
    }
}