$columns: 12!default;
$min: 10ch;
$gap: 1rem;
$maxwidth: 1200px!default;

$breakpoints: (
  small: 40em,
  medium: 65em
);

$colors: (
  primary: ( // blue
    300: 216 87% 60%,
    400: 216 87% 40%,
    500: 216 87% 20%,
  ),
  secondary: ( // purple
    300: 277 50% 60%,
    400: 277 50% 40%,
    500: 277 50% 20%,
  ),
  accent: ( // red
    300: 358 72% 70%,
    400: 358 72% 53%,
    500: 358 72% 30%,
  ),

  neutral: (
    100: 0 0% 100%,
    200: 0 0% 87%,
    300: 0 0% 80%,
    400: 0 0% 70%,
    500: 0 0% 60%,
    600: 0 0% 50%,
    700: 0 0% 40%,
    800: 0 0% 30%,
    900: 0 0% 15%,  
  )
);

$type-scale: (
  small:( // Minor third
    300: 1rem,
    400: 1.125rem,
    500: 1.563rem,
    600: 1.953rem,
    700: 2.441rem,
    800: 3.052rem
  ),
  big:( // Augmented fourth
    300: 1rem,
    400: 1.25rem,
    500: 2rem,
    600: 2.827rem,
    700: 4rem,
    800: 5.653rem
  )
);

@mixin mq($key) {

  $size: map-get($breakpoints, $key);

  @media only screen and (min-width: $size) {
    @content;
  }
}

@each $color,
$shade in $colors {

  @each $prop,
  $value in $shade {
    .text-#{$color}-#{$prop} {
      color: var(--clr-#{$color}-#{$prop}) !important;
    }

    .bg-#{$color}-#{$prop} {
      background-color: var(--clr-#{$color}-#{$prop}) !important;
    }
  }
}

:root {
  --section-spacing: 3.5rem;
  @include mq(medium) {
    --section-spacing: 7rem;
  }
  @each $color, $shade in $colors {

    @each $prop, $value in $shade {
      --clr-#{$color}-#{$prop}: #{$value};
    }
  }
  
  @each $screen-size, $property in $type-scale {
    @if $screen-size == small {
      @each $prop, $value in $property { 
        --fs-#{$prop}: #{$value};
      }
    } @else {
      @include mq(small) {
        @each $prop,
        $value in $property {
          --fs-#{$prop}: #{$value};
        }
      }
    }
  }
--min: #{$min};
--gap: #{$gap};
}

@mixin border($width, $style, $color) {
  border: {
    width: $width;
    style: $style;
    color: $color;
  }
}

@mixin shadow($h, $v, $b, $s, $color) {
    box-shadow: $h, $v, $b, $s, $color;
}

.border{
    @include border(1px, solid, gray);
    @include shadow(0px, 0px, 16px, 0px, rgba(0, 0, 0, 0.5));
}

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }

@function sizes($i){
    @return ($i * 100% / $columns);
}

.sidebar { width: sizes(3); }

///////// GRID /////////

.container{
  width: min(100% - 2rem, 1200px);
  margin-inline: auto;
}
.row{
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  list-style: none;
  padding: 0;
  & > * {
  flex: 1 1 var(--min);
    
    @media screen and (max-width: 40em) {
      & {flex: 0 1 100%;
        max-width: 100%;
      }
    }
    }
}



[class*="col-"] {
flex: 1 1 #{$min};
display: inline-flex;
}

@for $i from 1 through $columns {
    .col-#{$i} {
        flex: 0 0 ($i * 100% / $columns);
        max-width: ($i * 100% / $columns);
    }
}


// Inicio del sistema de columnas con breakpoint
@each $size, $screen-size in $breakpoints {
  @media all and (min-width: $screen-size) {
    @for $i from 1 through $columns {
      .col-#{$size}-#{$i*1} {
        flex: 0 0 ($i * 100% / $columns);
        max-width: ($i * 100% / $columns);
      }
    }
  }
}