Mobile first sass breakpoints config

$mobile: 480px;
$tablet: 768px;
$desktop: 1024px;
$large-desktop: 1280px;

@mixin minWidth($breakpoint) {
  @if $breakpoint == "mobile" {
    @media (min-width: #{$mobile}) {
      @content;
    }
  } @else if $breakpoint == "tablet" {
    @media (min-width: #{$tablet}) {
      @content;
    }
  } @else if $breakpoint == "desktop" {
    @media (min-width: #{$desktop}) {
      @content;
    }
  } @else if $breakpoint == "large-desktop" {
    @media (min-width: #{$large-desktop}) {
      @content;
    }
  }
}

.element {
  background-color: yellow; // Styles for mobile viewports

  @include responsive("mobile") {
    padding: 20px;
  }

  @include responsive("tablet") {
    padding: 30px;
  }

  @include responsive("desktop") {
    padding: 40px;
  }
}

.element {
  background-color: yellow;
}

@media (min-width: 480px) {
  .element {
    padding: 20px;
  }
}

@media (min-width: 768px) {
  .element {
    padding: 30px;
  }
}

@media (min-width: 1024px) {
  .element {
    padding: 40px;
  }
}

@use "sass:math";

@function rem($px) {
  @return math.div($px, 16) + rem;
}