미디어 쿼리 질문..

@use "@/styles/variables.scss" as *;

@mixin text {
  color: $color-gray-50;
  line-height: 2.6rem;
}

@include desktop {
  .borderBox {
    position: fixed;
    bottom: 0;
    display: flex;
    width: 100%;
    min-width: 37.5rem;
    height: 10rem;
    padding: 3.7rem 23.8rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
    background: $color-gray-10;

    .contentBox {
      display: flex;
      justify-content: space-between;
      align-items: center;
      align-self: stretch;

      .company {
        @include text;
      }

      .customerSupport {
        display: flex;
        width: 18rem;
        align-items: flex-start;
        gap: 3rem;

        .privacyPolicy {
          @include text;
        }

        .faq {
          @include text;
        }
      }

      .sns {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
      }
    }
  }

  @include tablet {
    .borderBox {
      padding: 3.2rem;
    }
  }

  @include mobile {
    .borderBox {
      height: 12.6rem;
      padding: 3.2rem;
      flex-wrap: wrap;

      .contentBox {
        flex-wrap: wrap-reverse;
        justify-content: space-between;

        .content {
          width: 35%;
        }

        .company {
          margin-top: 2.5rem;
          width: 100%;
        }

        .sns {
          justify-content: flex-end;
        }
      }
    }
  }
}

$breakpoint-mobile: 375px;
$breakpoint-tablet: 744px;
$breakpoint-pc: 1200px;

@mixin mobile {
  @media (min-width: $breakpoint-mobile) {
    @content;
  }
}

@mixin tablet {
  @media (min-width: $breakpoint-tablet)  {
    @content;
  }
}


@mixin desktop {
  @media (min-width: $breakpoint-pc) {
    @content;
  }
}

여기서 어느 사이즈든 모바일 미디어쿼리만 적용되고 있습니다.. 왜그런걸까요..