My SCSS respondTo media query mixin

compiled.css

.profile .title {
    font-size: 1.6rem;
    font-weight: bold; 
}
@media screen and (min-width: 0) and (max-width: 1087px) {
    .profile .title {
        font-size: 1.3rem; 
    } 
}

mixins.scss

$breakPoints: (
    "mobile": (
        "min": 0,
        "max": 699
    ),
    "tablet": (
        "min": 700,
        "max": 1023
    ),
    "desktop": (
        "min": 1024,
        "max": 1299
    ),
    "widescreen": (
        "min": 1300,
        "max": 100000px
    )
);
@mixin respondTo($requestedBreakPoints, $media: "screen") {
    $minValue: false;
    $maxValue: false;
    @each $breakPoint in $requestedBreakPoints {
        $bpData: map-get($breakPoints, $breakPoint);
        @if (map-has-key($bpData, "min")) {
            @if (
                ($minValue == false) or
                (map-get($bpData, "min") < $minValue)
            ) {
                $minValue: map-get($bpData, "min");
            }
        }
        @if (map-has-key($bpData, "max")) {
            @if (
                ($maxValue == false) or
                (map-get($bpData, "max") > $maxValue)
            ) {
                $maxValue: map-get($bpData, "max");
            }
        }
    }

    @media #{$media} and (min-width: $minValue) and (max-width: $maxValue) {
        @content;
    }
} // close respondTo

.profile {
    .title {
        font-size: 1.6rem;
        font-weight: bold;
        @include respondTo(mobile tablet) {
            font-size: 1.3rem;
        }
    }
}