@each $border-radius-name, $border-radius-value in $border-radii {
  .br-#{$border-radius-name} {
    border-radius: rem($border-radius-value);
  }

  .br-top-#{$border-radius-name} {
    border-top-right-radius: rem($border-radius-value);
    border-top-left-radius: rem($border-radius-value);
  }

  .br-right-#{$border-radius-name} {
    border-bottom-right-radius: rem($border-radius-value);
    border-top-right-radius: rem($border-radius-value);
  }

  .br-bottom-#{$border-radius-name} {
    border-bottom-right-radius: rem($border-radius-value);
    border-bottom-left-radius: rem($border-radius-value);
  }

  .br-left-#{$border-radius-name} {
    border-bottom-left-radius: rem($border-radius-value);
    border-top-left-radius: rem($border-radius-value);
  }
}

@each $breakpoint-name, $breakpoint-value in $breakpoints {
  @media #{$breakpoint-value} {
    @each $border-radius-name, $border-radius-value in $border-radii {
      .#{$breakpoint-name}--br-#{$border-radius-name} {
        border-radius: rem($border-radius-value);
      }
    }
  }
}