/** 
 *
 * @media(min-width: 28rem)    // Duży telefon            // xs (extra small)  ~448px
 * @media(min-width: 36rem)    // Telefon (Widok poziomy) // sm (small)        ~576px
 * @media(min-width: 48rem)    // Tablet                  // md (medium)       ~768px
 * @media(min-width: 62rem)    // Mały monitor            // lg (large)        ~992px
 * @media(min-width: 75rem)    // Monitor                 // xl (extra large)  ~1200px
 * @media(min-width: 100rem)   // Duży Monitor            // 2xl               ~1600px
 * 
 */

/**
 * Zmienne
 */

:root {
  --rb-space: 0.25rem;

  --rb-font-size-xs: calc(var(--rb-space) * 3);
  --rb-font-size-sm: calc(var(--rb-space) * 3,5);
  --rb-font-size-md: calc(var(--rb-space) * 4);
  --rb-font-size-lg: calc(var(--rb-space) * 4,5);
  --rb-font-size-xl: calc(var(--rb-space) * 5);
  --rb-font-size-2xl: calc(var(--rb-space) * 6.25);
  --rb-font-size-3xl: calc(var(--rb-space) * 7.5);
  --rb-font-size-4xl: calc(var(--rb-space) * 9);
  --rb-font-size-5xl: calc(var(--rb-space) * 12);
  --rb-font-size-6xl: calc(var(--rb-space) * 15);
  --rb-font-size-7xl: calc(var(--rb-space) * 18);

  --rb-shimmer-placeholder-background-color: rgba(226, 232, 240, 0.5);
  --rb-shimmer-placeholder-border-color: rgb(225, 225, 225);
  --rb-shimmer-placeholder-color-mid: rgba(255, 255, 255, 0.3);
  --rb-shimmer-placeholder-color-peak: rgba(255, 255, 255, 0.6);

  --rb-anim-time-draw: 0.6s;
}

/**
 * Normalizacja CSS
 */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  text-rendering: optimizeSpeed;
}

/**
 * Atrybut `width` 
 */

.rb-w--1 { width: calc(var(--rb-space) * 2) !important; }
.rb-w--2 { width: calc(var(--rb-space) * 4) !important; }
.rb-w--3 { width: calc(var(--rb-space) * 6) !important; }
.rb-w--4 { width: calc(var(--rb-space) * 8) !important; }
.rb-w--5 { width: calc(var(--rb-space) * 12) !important; }
.rb-w--6 { width: calc(var(--rb-space) * 16) !important; }
.rb-w--7 { width: calc(var(--rb-space) * 20) !important; }
.rb-w--8 { width: calc(var(--rb-space) * 24) !important; }
.rb-w--9 { width: calc(var(--rb-space) * 32) !important; }
.rb-w--10 { width: calc(var(--rb-space) * 40) !important; }
.rb-w--11 { width: calc(var(--rb-space) * 48) !important; }
.rb-w--12 { width: calc(var(--rb-space) * 56) !important; }
.rb-w--13 { width: calc(var(--rb-space) * 68) !important; }
.rb-w--14 { width: calc(var(--rb-space) * 80) !important; }
.rb-w--15 { width: calc(var(--rb-space) * 92) !important; }
.rb-w--16 { width: calc(var(--rb-space) * 104) !important; }
.rb-w--17 { width: calc(var(--rb-space) * 120) !important; }
.rb-w--18 { width: calc(var(--rb-space) * 136) !important; }
.rb-w--19 { width: calc(var(--rb-space) * 152) !important; }
.rb-w--20 { width: calc(var(--rb-space) * 168) !important; }

.rb-w--100p { width: 100% !important; }

.rb-mw--90p { max-width: 90% !important; }
.rb-mw--95p { max-width: 95% !important; }
.rb-mw--100p { max-width: 100% !important; }

/**
 * Atrybut `height`
 */

.rb-h--1 { height: calc(var(--rb-space) * 2) !important; }
.rb-h--2 { height: calc(var(--rb-space) * 4) !important; }
.rb-h--3 { height: calc(var(--rb-space) * 6) !important; }
.rb-h--4 { height: calc(var(--rb-space) * 8) !important; }
.rb-h--5 { height: calc(var(--rb-space) * 12) !important; }
.rb-h--6 { height: calc(var(--rb-space) * 16) !important; }
.rb-h--7 { height: calc(var(--rb-space) * 20) !important; }
.rb-h--8 { height: calc(var(--rb-space) * 24) !important; }
.rb-h--9 { height: calc(var(--rb-space) * 32) !important; }
.rb-h--10 { height: calc(var(--rb-space) * 40) !important; }

.rb-h--100p { height: 100% !important; }

.rb-mh--90p { max-height: 90% !important; }
.rb-mh--95p { max-height: 95% !important; }
.rb-mh--100p { max-height: 100% !important; }

/**
 * Atrybut `margin`
 */

.rb-mx--1 { margin-inline: calc(var(--rb-space) * 1) !important; }
.rb-mx--2 { margin-inline: calc(var(--rb-space) * 2) !important; }
.rb-mx--3 { margin-inline: calc(var(--rb-space) * 3) !important; }
.rb-mx--4 { margin-inline: calc(var(--rb-space) * 4) !important; }
.rb-mx--auto { margin-inline: auto !important; }

.rb-my--1 { margin-block: calc(var(--rb-space) * 1) !important; }
.rb-my--2 { margin-block: calc(var(--rb-space) * 2) !important; }
.rb-my--3 { margin-block: calc(var(--rb-space) * 3) !important; }
.rb-my--4 { margin-block: calc(var(--rb-space) * 4) !important; }
.rb-my--auto { margin-block: auto !important; }

.rb-mt--1 { margin-top: calc(var(--rb-space) * 1) !important; }
.rb-mt--2 { margin-top: calc(var(--rb-space) * 2) !important; }
.rb-mt--3 { margin-top: calc(var(--rb-space) * 3) !important; }
.rb-mt--4 { margin-top: calc(var(--rb-space) * 4) !important; }
.rb-mt--auto { margin-top: auto !important; }

.rb-mr--1 { margin-right: calc(var(--rb-space) * 1) !important; }
.rb-mr--2 { margin-right: calc(var(--rb-space) * 2) !important; }
.rb-mr--3 { margin-right: calc(var(--rb-space) * 3) !important; }
.rb-mr--4 { margin-right: calc(var(--rb-space) * 4) !important; }
.rb-mr--auto { margin-right: auto !important; }

.rb-mb--1 { margin-bottom: calc(var(--rb-space) * 1) !important; }
.rb-mb--2 { margin-bottom: calc(var(--rb-space) * 2) !important; }
.rb-mb--3 { margin-bottom: calc(var(--rb-space) * 3) !important; }
.rb-mb--4 { margin-bottom: calc(var(--rb-space) * 4) !important; }
.rb-mb--auto { margin-bottom: auto !important; }

.rb-ml--1 { margin-left: calc(var(--rb-space) * 1) !important; }
.rb-ml--2 { margin-left: calc(var(--rb-space) * 2) !important; }
.rb-ml--3 { margin-left: calc(var(--rb-space) * 3) !important; }
.rb-ml--4 { margin-left: calc(var(--rb-space) * 4) !important; }
.rb-ml--auto { margin-left: auto !important; }

/**
 * Atrybut `display`
 */

.rb-d--block { display: block !important; }
.rb-d--flex { display: flex !important; }
.rb-d--grid { display: grid !important; }
.rb-d--inline-block { display: inline-block !important; }
.rb-d--inline-flex { display: inline-flex !important; }
.rb-d--none { display: none !important; }

@media (min-width: 28rem) {
  .rb-xs-d--block { display: block !important; }
  .rb-xs-d--flex { display: flex !important; }
  .rb-xs-d--grid { display: grid !important; }
  .rb-xs-d--inline-block { display: inline-block !important; }
  .rb-xs-d--inline-flex { display: inline-flex !important; }
  .rb-xs-d--none { display: none !important; }
}

@media (min-width: 36rem) {
  .rb-sm-d--block { display: block !important; }
  .rb-sm-d--flex { display: flex !important; }
  .rb-sm-d--grid { display: grid !important; }
  .rb-sm-d--inline-block { display: inline-block !important; }
  .rb-sm-d--inline-flex { display: inline-flex !important; }
  .rb-sm-d--none { display: none !important; }
}

@media (min-width: 48rem) {
  .rb-md-d--block { display: block !important; }
  .rb-md-d--flex { display: flex !important; }
  .rb-md-d--grid { display: grid !important; }
  .rb-md-d--inline-block { display: inline-block !important; }
  .rb-md-d--inline-flex { display: inline-flex !important; }
  .rb-md-d--none { display: none !important; }
}

@media (min-width: 62rem) {
  .rb-lg-d--block { display: block !important; }
  .rb-lg-d--flex { display: flex !important; }
  .rb-lg-d--grid { display: grid !important; }
  .rb-lg-d--inline-block { display: inline-block !important; }
  .rb-lg-d--inline-flex { display: inline-flex !important; }
  .rb-lg-d--none { display: none !important; }
}

@media (min-width: 75rem) {
  .rb-xl-d--block { display: block !important; }
  .rb-xl-d--flex { display: flex !important; }
  .rb-xl-d--grid { display: grid !important; }
  .rb-xl-d--inline-block { display: inline-block !important; }
  .rb-xl-d--inline-flex { display: inline-flex !important; }
  .rb-xl-d--none { display: none !important; }
}

@media (min-width: 100rem) {
  .rb-2xl-d--block { display: block !important; }
  .rb-2xl-d--flex { display: flex !important; }
  .rb-2xl-d--grid { display: grid !important; }
  .rb-2xl-d--inline-block { display: inline-block !important; }
  .rb-2xl-d--inline-flex { display: inline-flex !important; }
  .rb-2xl-d--none { display: none !important; }
}

/**
 * Atrybut `padding` 
 */

.rb-pt--2 { padding-top: calc(var(--rb-space) * 2) !important; }
.rb-pt--4 { padding-top: calc(var(--rb-space) * 4) !important; }
.rb-pt--6 { padding-top: calc(var(--rb-space) * 6) !important; }
.rb-pt--8 { padding-top: calc(var(--rb-space) * 8) !important; }
.rb-pt--10 { padding-top: calc(var(--rb-space) * 10) !important; }
.rb-pt--20 { padding-top: calc(var(--rb-space) * 20) !important; }
.rb-pt--30 { padding-top: calc(var(--rb-space) * 30) !important; }
.rb-pt--40 { padding-top: calc(var(--rb-space) * 40) !important; }

.rb-pb--2 { padding-bottom: calc(var(--rb-space) * 2) !important; }
.rb-pb--4 { padding-bottom: calc(var(--rb-space) * 4) !important; }
.rb-pb--6 { padding-bottom: calc(var(--rb-space) * 6) !important; }
.rb-pb--8 { padding-bottom: calc(var(--rb-space) * 8) !important; }
.rb-pb--10 { padding-bottom: calc(var(--rb-space) * 10) !important; }
.rb-pb--20 { padding-bottom: calc(var(--rb-space) * 20) !important; }
.rb-pb--30 { padding-bottom: calc(var(--rb-space) * 30) !important; }
.rb-pb--40 { padding-bottom: calc(var(--rb-space) * 40) !important; }

.rb-px--2 { padding-inline: calc(var(--rb-space) * 2) !important; }
.rb-px--4 { padding-inline: calc(var(--rb-space) * 4) !important; }
.rb-px--6 { padding-inline: calc(var(--rb-space) * 6) !important; }
.rb-px--8 { padding-inline: calc(var(--rb-space) * 8) !important; }
.rb-px--10 { padding-inline: calc(var(--rb-space) * 10) !important; }
.rb-px--20 { padding-inline: calc(var(--rb-space) * 20) !important; }
.rb-px--30 { padding-inline: calc(var(--rb-space) * 30) !important; }
.rb-px--40 { padding-inline: calc(var(--rb-space) * 40) !important; }

.rb-py--2 { padding-block: calc(var(--rb-space) * 2) !important; }
.rb-py--4 { padding-block: calc(var(--rb-space) * 4) !important; }
.rb-py--6 { padding-block: calc(var(--rb-space) * 6) !important; }
.rb-py--8 { padding-block: calc(var(--rb-space) * 8) !important; }
.rb-py--10 { padding-block: calc(var(--rb-space) * 10) !important; }
.rb-py--20 { padding-block: calc(var(--rb-space) * 20) !important; }
.rb-py--30 { padding-block: calc(var(--rb-space) * 30) !important; }
.rb-py--40 { padding-block: calc(var(--rb-space) * 40) !important; }

@media (min-width: 28rem) {
  .rb-xs-pt--2 { padding-top: calc(var(--rb-space) * 2) !important; }
  .rb-xs-pt--4 { padding-top: calc(var(--rb-space) * 4) !important; }
  .rb-xs-pt--6 { padding-top: calc(var(--rb-space) * 6) !important; }
  .rb-xs-pt--8 { padding-top: calc(var(--rb-space) * 8) !important; }
  .rb-xs-pt--10 { padding-top: calc(var(--rb-space) * 10) !important; }
  .rb-xs-pt--20 { padding-top: calc(var(--rb-space) * 20) !important; }
  .rb-xs-pt--30 { padding-top: calc(var(--rb-space) * 30) !important; }
  .rb-xs-pt--40 { padding-top: calc(var(--rb-space) * 40) !important; }

  .rb-xs-pb--2 { padding-bottom: calc(var(--rb-space) * 2) !important; }
  .rb-xs-pb--4 { padding-bottom: calc(var(--rb-space) * 4) !important; }
  .rb-xs-pb--6 { padding-bottom: calc(var(--rb-space) * 6) !important; }
  .rb-xs-pb--8 { padding-bottom: calc(var(--rb-space) * 8) !important; }
  .rb-xs-pb--10 { padding-bottom: calc(var(--rb-space) * 10) !important; }
  .rb-xs-pb--20 { padding-bottom: calc(var(--rb-space) * 20) !important; }
  .rb-xs-pb--30 { padding-bottom: calc(var(--rb-space) * 30) !important; }
  .rb-xs-pb--40 { padding-bottom: calc(var(--rb-space) * 40) !important; }

  .rb-xs-px--2 { padding-inline: calc(var(--rb-space) * 2) !important; }
  .rb-xs-px--4 { padding-inline: calc(var(--rb-space) * 4) !important; }
  .rb-xs-px--6 { padding-inline: calc(var(--rb-space) * 6) !important; }
  .rb-xs-px--8 { padding-inline: calc(var(--rb-space) * 8) !important; }
  .rb-xs-px--10 { padding-inline: calc(var(--rb-space) * 10) !important; }
  .rb-xs-px--20 { padding-inline: calc(var(--rb-space) * 20) !important; }
  .rb-xs-px--30 { padding-inline: calc(var(--rb-space) * 30) !important; }
  .rb-xs-px--40 { padding-inline: calc(var(--rb-space) * 40) !important; }
  
  .rb-xs-py--2 { padding-block: calc(var(--rb-space) * 2) !important; }
  .rb-xs-py--4 { padding-block: calc(var(--rb-space) * 4) !important; }
  .rb-xs-py--6 { padding-block: calc(var(--rb-space) * 6) !important; }
  .rb-xs-py--8 { padding-block: calc(var(--rb-space) * 8) !important; }
  .rb-xs-py--10 { padding-block: calc(var(--rb-space) * 10) !important; }
  .rb-xs-py--20 { padding-block: calc(var(--rb-space) * 20) !important; }
  .rb-xs-py--30 { padding-block: calc(var(--rb-space) * 30) !important; }
  .rb-xs-py--40 { padding-block: calc(var(--rb-space) * 40) !important; }
}

@media (min-width: 36rem) {
  .rb-sm-pt--2 { padding-top: calc(var(--rb-space) * 2) !important; }
  .rb-sm-pt--4 { padding-top: calc(var(--rb-space) * 4) !important; }
  .rb-sm-pt--6 { padding-top: calc(var(--rb-space) * 6) !important; }
  .rb-sm-pt--8 { padding-top: calc(var(--rb-space) * 8) !important; }
  .rb-sm-pt--10 { padding-top: calc(var(--rb-space) * 10) !important; }
  .rb-sm-pt--20 { padding-top: calc(var(--rb-space) * 20) !important; }
  .rb-sm-pt--30 { padding-top: calc(var(--rb-space) * 30) !important; }
  .rb-sm-pt--40 { padding-top: calc(var(--rb-space) * 40) !important; }

  .rb-sm-pb--2 { padding-bottom: calc(var(--rb-space) * 2) !important; }
  .rb-sm-pb--4 { padding-bottom: calc(var(--rb-space) * 4) !important; }
  .rb-sm-pb--6 { padding-bottom: calc(var(--rb-space) * 6) !important; }
  .rb-sm-pb--8 { padding-bottom: calc(var(--rb-space) * 8) !important; }
  .rb-sm-pb--10 { padding-bottom: calc(var(--rb-space) * 10) !important; }
  .rb-sm-pb--20 { padding-bottom: calc(var(--rb-space) * 20) !important; }
  .rb-sm-pb--30 { padding-bottom: calc(var(--rb-space) * 30) !important; }
  .rb-sm-pb--40 { padding-bottom: calc(var(--rb-space) * 40) !important; }

  .rb-sm-px--2 { padding-inline: calc(var(--rb-space) * 2) !important; }
  .rb-sm-px--4 { padding-inline: calc(var(--rb-space) * 4) !important; }
  .rb-sm-px--6 { padding-inline: calc(var(--rb-space) * 6) !important; }
  .rb-sm-px--8 { padding-inline: calc(var(--rb-space) * 8) !important; }
  .rb-sm-px--10 { padding-inline: calc(var(--rb-space) * 10) !important; }
  .rb-sm-px--20 { padding-inline: calc(var(--rb-space) * 20) !important; }
  .rb-sm-px--30 { padding-inline: calc(var(--rb-space) * 30) !important; }
  .rb-sm-px--40 { padding-inline: calc(var(--rb-space) * 40) !important; }
  
  .rb-sm-py--2 { padding-block: calc(var(--rb-space) * 2) !important; }
  .rb-sm-py--4 { padding-block: calc(var(--rb-space) * 4) !important; }
  .rb-sm-py--6 { padding-block: calc(var(--rb-space) * 6) !important; }
  .rb-sm-py--8 { padding-block: calc(var(--rb-space) * 8) !important; }
  .rb-sm-py--10 { padding-block: calc(var(--rb-space) * 10) !important; }
  .rb-sm-py--20 { padding-block: calc(var(--rb-space) * 20) !important; }
  .rb-sm-py--30 { padding-block: calc(var(--rb-space) * 30) !important; }
  .rb-sm-py--40 { padding-block: calc(var(--rb-space) * 40) !important; }
}

@media (min-width: 48rem) {
  .rb-md-pt--2 { padding-top: calc(var(--rb-space) * 2) !important; }
  .rb-md-pt--4 { padding-top: calc(var(--rb-space) * 4) !important; }
  .rb-md-pt--6 { padding-top: calc(var(--rb-space) * 6) !important; }
  .rb-md-pt--8 { padding-top: calc(var(--rb-space) * 8) !important; }
  .rb-md-pt--10 { padding-top: calc(var(--rb-space) * 10) !important; }
  .rb-md-pt--20 { padding-top: calc(var(--rb-space) * 20) !important; }
  .rb-md-pt--30 { padding-top: calc(var(--rb-space) * 30) !important; }
  .rb-md-pt--40 { padding-top: calc(var(--rb-space) * 40) !important; }

  .rb-md-pb--2 { padding-bottom: calc(var(--rb-space) * 2) !important; }
  .rb-md-pb--4 { padding-bottom: calc(var(--rb-space) * 4) !important; }
  .rb-md-pb--6 { padding-bottom: calc(var(--rb-space) * 6) !important; }
  .rb-md-pb--8 { padding-bottom: calc(var(--rb-space) * 8) !important; }
  .rb-md-pb--10 { padding-bottom: calc(var(--rb-space) * 10) !important; }
  .rb-md-pb--20 { padding-bottom: calc(var(--rb-space) * 20) !important; }
  .rb-md-pb--30 { padding-bottom: calc(var(--rb-space) * 30) !important; }
  .rb-md-pb--40 { padding-bottom: calc(var(--rb-space) * 40) !important; }

  .rb-md-px--2 { padding-inline: calc(var(--rb-space) * 2) !important; }
  .rb-md-px--4 { padding-inline: calc(var(--rb-space) * 4) !important; }
  .rb-md-px--6 { padding-inline: calc(var(--rb-space) * 6) !important; }
  .rb-md-px--8 { padding-inline: calc(var(--rb-space) * 8) !important; }
  .rb-md-px--10 { padding-inline: calc(var(--rb-space) * 10) !important; }
  .rb-md-px--20 { padding-inline: calc(var(--rb-space) * 20) !important; }
  .rb-md-px--30 { padding-inline: calc(var(--rb-space) * 30) !important; }
  .rb-md-px--40 { padding-inline: calc(var(--rb-space) * 40) !important; }
  
  .rb-md-py--2 { padding-block: calc(var(--rb-space) * 2) !important; }
  .rb-md-py--4 { padding-block: calc(var(--rb-space) * 4) !important; }
  .rb-md-py--6 { padding-block: calc(var(--rb-space) * 6) !important; }
  .rb-md-py--8 { padding-block: calc(var(--rb-space) * 8) !important; }
  .rb-md-py--10 { padding-block: calc(var(--rb-space) * 10) !important; }
  .rb-md-py--20 { padding-block: calc(var(--rb-space) * 20) !important; }
  .rb-md-py--30 { padding-block: calc(var(--rb-space) * 30) !important; }
  .rb-md-py--40 { padding-block: calc(var(--rb-space) * 40) !important; }
}

@media (min-width: 62rem) {
  .rb-lg-pt--2 { padding-top: calc(var(--rb-space) * 2) !important; }
  .rb-lg-pt--4 { padding-top: calc(var(--rb-space) * 4) !important; }
  .rb-lg-pt--6 { padding-top: calc(var(--rb-space) * 6) !important; }
  .rb-lg-pt--8 { padding-top: calc(var(--rb-space) * 8) !important; }
  .rb-lg-pt--10 { padding-top: calc(var(--rb-space) * 10) !important; }
  .rb-lg-pt--20 { padding-top: calc(var(--rb-space) * 20) !important; }
  .rb-lg-pt--30 { padding-top: calc(var(--rb-space) * 30) !important; }
  .rb-lg-pt--40 { padding-top: calc(var(--rb-space) * 40) !important; }

  .rb-lg-pb--2 { padding-bottom: calc(var(--rb-space) * 2) !important; }
  .rb-lg-pb--4 { padding-bottom: calc(var(--rb-space) * 4) !important; }
  .rb-lg-pb--6 { padding-bottom: calc(var(--rb-space) * 6) !important; }
  .rb-lg-pb--8 { padding-bottom: calc(var(--rb-space) * 8) !important; }
  .rb-lg-pb--10 { padding-bottom: calc(var(--rb-space) * 10) !important; }
  .rb-lg-pb--20 { padding-bottom: calc(var(--rb-space) * 20) !important; }
  .rb-lg-pb--30 { padding-bottom: calc(var(--rb-space) * 30) !important; }
  .rb-lg-pb--40 { padding-bottom: calc(var(--rb-space) * 40) !important; }

  .rb-lg-px--2 { padding-inline: calc(var(--rb-space) * 2) !important; }
  .rb-lg-px--4 { padding-inline: calc(var(--rb-space) * 4) !important; }
  .rb-lg-px--6 { padding-inline: calc(var(--rb-space) * 6) !important; }
  .rb-lg-px--8 { padding-inline: calc(var(--rb-space) * 8) !important; }
  .rb-lg-px--10 { padding-inline: calc(var(--rb-space) * 10) !important; }
  .rb-lg-px--20 { padding-inline: calc(var(--rb-space) * 20) !important; }
  .rb-lg-px--30 { padding-inline: calc(var(--rb-space) * 30) !important; }
  .rb-lg-px--40 { padding-inline: calc(var(--rb-space) * 40) !important; }
  
  .rb-lg-py--2 { padding-block: calc(var(--rb-space) * 2) !important; }
  .rb-lg-py--4 { padding-block: calc(var(--rb-space) * 4) !important; }
  .rb-lg-py--6 { padding-block: calc(var(--rb-space) * 6) !important; }
  .rb-lg-py--8 { padding-block: calc(var(--rb-space) * 8) !important; }
  .rb-lg-py--10 { padding-block: calc(var(--rb-space) * 10) !important; }
  .rb-lg-py--20 { padding-block: calc(var(--rb-space) * 20) !important; }
  .rb-lg-py--30 { padding-block: calc(var(--rb-space) * 30) !important; }
  .rb-lg-py--40 { padding-block: calc(var(--rb-space) * 40) !important; }
}

@media (min-width: 75rem) {
  .rb-xl-pt--2 { padding-top: calc(var(--rb-space) * 2) !important; }
  .rb-xl-pt--4 { padding-top: calc(var(--rb-space) * 4) !important; }
  .rb-xl-pt--6 { padding-top: calc(var(--rb-space) * 6) !important; }
  .rb-xl-pt--8 { padding-top: calc(var(--rb-space) * 8) !important; }
  .rb-xl-pt--10 { padding-top: calc(var(--rb-space) * 10) !important; }
  .rb-xl-pt--20 { padding-top: calc(var(--rb-space) * 20) !important; }
  .rb-xl-pt--30 { padding-top: calc(var(--rb-space) * 30) !important; }
  .rb-xl-pt--40 { padding-top: calc(var(--rb-space) * 40) !important; }

  .rb-xl-pb--2 { padding-bottom: calc(var(--rb-space) * 2) !important; }
  .rb-xl-pb--4 { padding-bottom: calc(var(--rb-space) * 4) !important; }
  .rb-xl-pb--6 { padding-bottom: calc(var(--rb-space) * 6) !important; }
  .rb-xl-pb--8 { padding-bottom: calc(var(--rb-space) * 8) !important; }
  .rb-xl-pb--10 { padding-bottom: calc(var(--rb-space) * 10) !important; }
  .rb-xl-pb--20 { padding-bottom: calc(var(--rb-space) * 20) !important; }
  .rb-xl-pb--30 { padding-bottom: calc(var(--rb-space) * 30) !important; }
  .rb-xl-pb--40 { padding-bottom: calc(var(--rb-space) * 40) !important; }

  .rb-xl-px--2 { padding-inline: calc(var(--rb-space) * 2) !important; }
  .rb-xl-px--4 { padding-inline: calc(var(--rb-space) * 4) !important; }
  .rb-xl-px--6 { padding-inline: calc(var(--rb-space) * 6) !important; }
  .rb-xl-px--8 { padding-inline: calc(var(--rb-space) * 8) !important; }
  .rb-xl-px--10 { padding-inline: calc(var(--rb-space) * 10) !important; }
  .rb-xl-px--20 { padding-inline: calc(var(--rb-space) * 20) !important; }
  .rb-xl-px--30 { padding-inline: calc(var(--rb-space) * 30) !important; }
  .rb-xl-px--40 { padding-inline: calc(var(--rb-space) * 40) !important; }
  
  .rb-xl-py--2 { padding-block: calc(var(--rb-space) * 2) !important; }
  .rb-xl-py--4 { padding-block: calc(var(--rb-space) * 4) !important; }
  .rb-xl-py--6 { padding-block: calc(var(--rb-space) * 6) !important; }
  .rb-xl-py--8 { padding-block: calc(var(--rb-space) * 8) !important; }
  .rb-xl-py--10 { padding-block: calc(var(--rb-space) * 10) !important; }
  .rb-xl-py--20 { padding-block: calc(var(--rb-space) * 20) !important; }
  .rb-xl-py--30 { padding-block: calc(var(--rb-space) * 30) !important; }
  .rb-xl-py--40 { padding-block: calc(var(--rb-space) * 40) !important; }
}

@media (min-width: 100rem) {
  .rb-2xl-pt--2 { padding-top: calc(var(--rb-space) * 2) !important; }
  .rb-2xl-pt--4 { padding-top: calc(var(--rb-space) * 4) !important; }
  .rb-2xl-pt--6 { padding-top: calc(var(--rb-space) * 6) !important; }
  .rb-2xl-pt--8 { padding-top: calc(var(--rb-space) * 8) !important; }
  .rb-2xl-pt--10 { padding-top: calc(var(--rb-space) * 10) !important; }
  .rb-2xl-pt--20 { padding-top: calc(var(--rb-space) * 20) !important; }
  .rb-2xl-pt--30 { padding-top: calc(var(--rb-space) * 30) !important; }
  .rb-2xl-pt--40 { padding-top: calc(var(--rb-space) * 40) !important; }

  .rb-2xl-pb--2 { padding-bottom: calc(var(--rb-space) * 2) !important; }
  .rb-2xl-pb--4 { padding-bottom: calc(var(--rb-space) * 4) !important; }
  .rb-2xl-pb--6 { padding-bottom: calc(var(--rb-space) * 6) !important; }
  .rb-2xl-pb--8 { padding-bottom: calc(var(--rb-space) * 8) !important; }
  .rb-2xl-pb--10 { padding-bottom: calc(var(--rb-space) * 10) !important; }
  .rb-2xl-pb--20 { padding-bottom: calc(var(--rb-space) * 20) !important; }
  .rb-2xl-pb--30 { padding-bottom: calc(var(--rb-space) * 30) !important; }
  .rb-2xl-pb--40 { padding-bottom: calc(var(--rb-space) * 40) !important; }

  .rb-2xl-px--2 { padding-inline: calc(var(--rb-space) * 4) !important; }
  .rb-2xl-px--4 { padding-inline: calc(var(--rb-space) * 5) !important; }
  .rb-2xl-px--6 { padding-inline: calc(var(--rb-space) * 6) !important; }
  .rb-2xl-px--8 { padding-inline: calc(var(--rb-space) * 8) !important; }
  .rb-2xl-px--10 { padding-inline: calc(var(--rb-space) * 10) !important; }
  .rb-2xl-px--20 { padding-inline: calc(var(--rb-space) * 20) !important; }
  .rb-2xl-px--30 { padding-inline: calc(var(--rb-space) * 30) !important; }
  .rb-2xl-px--40 { padding-inline: calc(var(--rb-space) * 40) !important; }
  
  .rb-2xl-py--2 { padding-block: calc(var(--rb-space) * 4) !important; }
  .rb-2xl-py--4 { padding-block: calc(var(--rb-space) * 5) !important; }
  .rb-2xl-py--6 { padding-block: calc(var(--rb-space) * 6) !important; }
  .rb-2xl-py--8 { padding-block: calc(var(--rb-space) * 8) !important; }
  .rb-2xl-py--10 { padding-block: calc(var(--rb-space) * 10) !important; }
  .rb-2xl-py--20 { padding-block: calc(var(--rb-space) * 20) !important; }
  .rb-2xl-py--30 { padding-block: calc(var(--rb-space) * 30) !important; }
  .rb-2xl-py--40 { padding-block: calc(var(--rb-space) * 40) !important; }
}

/**
 * Atrybut `font-size`
 */

.rb-fs--xs { font-size: var(--rb-font-size-xs) !important; }
.rb-fs--sm { font-size: var(--rb-font-size-sm) !important; }
.rb-fs--md { font-size: var(--rb-font-size-md) !important; }
.rb-fs--lg { font-size: var(--rb-font-size-lg) !important; }
.rb-fs--xl { font-size: var(--rb-font-size-xl) !important; }
.rb-fs--2xl { font-size: var(--rb-font-size-2xl) !important; }
.rb-fs--3xl { font-size: var(--rb-font-size-3xl) !important; }
.rb-fs--4xl { font-size: var(--rb-font-size-4xl) !important; }
.rb-fs--5xl { font-size: var(--rb-font-size-5xl) !important; }
.rb-fs--6xl { font-size: var(--rb-font-size-6xl) !important; }
.rb-fs--7xl { font-size: var(--rb-font-size-7xl) !important; }

@media (min-width: 28rem) {
  .rb-xs-fs--xs { font-size: var(--rb-font-size-xs) !important; }
  .rb-xs-fs--sm { font-size: var(--rb-font-size-sm) !important; }
  .rb-xs-fs--md { font-size: var(--rb-font-size-md) !important; }
  .rb-xs-fs--lg { font-size: var(--rb-font-size-lg) !important; }
  .rb-xs-fs--xl { font-size: var(--rb-font-size-xl) !important; }
  .rb-xs-fs--2xl { font-size: var(--rb-font-size-2xl) !important; }
  .rb-xs-fs--3xl { font-size: var(--rb-font-size-3xl) !important; }
  .rb-xs-fs--4xl { font-size: var(--rb-font-size-4xl) !important; }
  .rb-xs-fs--5xl { font-size: var(--rb-font-size-5xl) !important; }
  .rb-xs-fs--6xl { font-size: var(--rb-font-size-6xl) !important; }
  .rb-xs-fs--7xl { font-size: var(--rb-font-size-7xl) !important; }
}

@media (min-width: 36rem) {
  .rb-sm-fs--xs { font-size: var(--rb-font-size-xs) !important; }
  .rb-sm-fs--sm { font-size: var(--rb-font-size-sm) !important; }
  .rb-sm-fs--md { font-size: var(--rb-font-size-md) !important; }
  .rb-sm-fs--lg { font-size: var(--rb-font-size-lg) !important; }
  .rb-sm-fs--xl { font-size: var(--rb-font-size-xl) !important; }
  .rb-sm-fs--2xl { font-size: var(--rb-font-size-2xl) !important; }
  .rb-sm-fs--3xl { font-size: var(--rb-font-size-3xl) !important; }
  .rb-sm-fs--4xl { font-size: var(--rb-font-size-4xl) !important; }
  .rb-sm-fs--5xl { font-size: var(--rb-font-size-5xl) !important; }
  .rb-sm-fs--6xl { font-size: var(--rb-font-size-6xl) !important; }
  .rb-sm-fs--7xl { font-size: var(--rb-font-size-7xl) !important; }
}

@media (min-width: 48rem) {
  .rb-md-fs--xs { font-size: var(--rb-font-size-xs) !important; }
  .rb-md-fs--sm { font-size: var(--rb-font-size-sm) !important; }
  .rb-md-fs--md { font-size: var(--rb-font-size-md) !important; }
  .rb-md-fs--lg { font-size: var(--rb-font-size-lg) !important; }
  .rb-md-fs--xl { font-size: var(--rb-font-size-xl) !important; }
  .rb-md-fs--2xl { font-size: var(--rb-font-size-2xl) !important; }
  .rb-md-fs--3xl { font-size: var(--rb-font-size-3xl) !important; }
  .rb-md-fs--4xl { font-size: var(--rb-font-size-4xl) !important; }
  .rb-md-fs--5xl { font-size: var(--rb-font-size-5xl) !important; }
  .rb-md-fs--6xl { font-size: var(--rb-font-size-6xl) !important; }
  .rb-md-fs--7xl { font-size: var(--rb-font-size-7xl) !important; }
}

@media (min-width: 62rem) {
  .rb-lg-fs--xs { font-size: var(--rb-font-size-xs) !important; }
  .rb-lg-fs--sm { font-size: var(--rb-font-size-sm) !important; }
  .rb-lg-fs--md { font-size: var(--rb-font-size-md) !important; }
  .rb-lg-fs--lg { font-size: var(--rb-font-size-lg) !important; }
  .rb-lg-fs--xl { font-size: var(--rb-font-size-xl) !important; }
  .rb-lg-fs--2xl { font-size: var(--rb-font-size-2xl) !important; }
  .rb-lg-fs--3xl { font-size: var(--rb-font-size-3xl) !important; }
  .rb-lg-fs--4xl { font-size: var(--rb-font-size-4xl) !important; }
  .rb-lg-fs--5xl { font-size: var(--rb-font-size-5xl) !important; }
  .rb-lg-fs--6xl { font-size: var(--rb-font-size-6xl) !important; }
  .rb-lg-fs--7xl { font-size: var(--rb-font-size-7xl) !important; }
}

@media (min-width: 75rem) {
  .rb-xl-fs--xs { font-size: var(--rb-font-size-xs) !important; }
  .rb-xl-fs--sm { font-size: var(--rb-font-size-sm) !important; }
  .rb-xl-fs--md { font-size: var(--rb-font-size-md) !important; }
  .rb-xl-fs--lg { font-size: var(--rb-font-size-lg) !important; }
  .rb-xl-fs--xl { font-size: var(--rb-font-size-xl) !important; }
  .rb-xl-fs--2xl { font-size: var(--rb-font-size-2xl) !important; }
  .rb-xl-fs--3xl { font-size: var(--rb-font-size-3xl) !important; }
  .rb-xl-fs--4xl { font-size: var(--rb-font-size-4xl) !important; }
  .rb-xl-fs--5xl { font-size: var(--rb-font-size-5xl) !important; }
  .rb-xl-fs--6xl { font-size: var(--rb-font-size-6xl) !important; }
  .rb-xl-fs--7xl { font-size: var(--rb-font-size-7xl) !important; }
}

@media (min-width: 100rem) {
  .rb-2xl-fs--xs { font-size: var(--rb-font-size-xs) !important; }
  .rb-2xl-fs--sm { font-size: var(--rb-font-size-sm) !important; }
  .rb-2xl-fs--md { font-size: var(--rb-font-size-md) !important; }
  .rb-2xl-fs--lg { font-size: var(--rb-font-size-lg) !important; }
  .rb-2xl-fs--xl { font-size: var(--rb-font-size-xl) !important; }
  .rb-2xl-fs--2xl { font-size: var(--rb-font-size-2xl) !important; }
  .rb-2xl-fs--3xl { font-size: var(--rb-font-size-3xl) !important; }
  .rb-2xl-fs--4xl { font-size: var(--rb-font-size-4xl) !important; }
  .rb-2xl-fs--5xl { font-size: var(--rb-font-size-5xl) !important; }
  .rb-2xl-fs--6xl { font-size: var(--rb-font-size-6xl) !important; }
  .rb-2xl-fs--7xl { font-size: var(--rb-font-size-7xl) !important; }
}

/**
 * Układ `flex`
 */

.rb-flex--1 { flex-basis: 100% !important; }
.rb-flex--2 { flex-basis: 50% !important; }
.rb-flex--3 { flex-basis: 33.3333% !important; }
.rb-flex--4 { flex-basis: 25% !important; }
.rb-flex--5 { flex-basis: 20% !important; }
.rb-flex--6 { flex-basis: 16.6666% !important; }
.rb-flex--auto { flex-basis: auto !important; }

.rb-flex-direction--row { flex-direction: row !important; }
.rb-flex-direction--column { flex-direction: column !important; }

.rb-align-items--center { align-items: center !important; }
.rb-justify-content--between { justify-content: space-between !important; }

@media (min-width: 28rem) {
  .rb-xs-flex--1 { flex-basis: 100% !important; }
  .rb-xs-flex--2 { flex-basis: 50% !important; }
  .rb-xs-flex--3 { flex-basis: 33.3333% !important; }
  .rb-xs-flex--4 { flex-basis: 25% !important; }
  .rb-xs-flex--5 { flex-basis: 20% !important; }
  .rb-xs-flex--6 { flex-basis: 16.6666% !important; }
  .rb-xs-flex--auto { flex-basis: auto !important; }

  .rb-xs-flex-direction--row { flex-direction: row !important; }
  .rb-xs-flex-direction--column { flex-direction: column !important; }

  .rb-xs-align-items--center { align-items: center !important; }
  .rb-xs-justify-content--between { justify-content: space-between !important; }
}

@media (min-width: 36rem) {
  .rb-sm-flex--1 { flex-basis: 100% !important; }
  .rb-sm-flex--2 { flex-basis: 50% !important; }
  .rb-sm-flex--3 { flex-basis: 33.3333% !important; }
  .rb-sm-flex--4 { flex-basis: 25% !important; }
  .rb-sm-flex--5 { flex-basis: 20% !important; }
  .rb-sm-flex--6 { flex-basis: 16.6666% !important; }
  .rb-sm-flex--auto { flex-basis: auto !important; }

  .rb-sm-flex-direction--row { flex-direction: row !important; }
  .rb-sm-flex-direction--column { flex-direction: column !important; }

  .rb-sm-align-items--center { align-items: center !important; }
  .rb-sm-justify-content--between { justify-content: space-between !important; }
}

@media (min-width: 48rem) {
  .rb-md-flex--1 { flex-basis: 100% !important; }
  .rb-md-flex--2 { flex-basis: 50% !important; }
  .rb-md-flex--3 { flex-basis: 33.3333% !important; }
  .rb-md-flex--4 { flex-basis: 25% !important; }
  .rb-md-flex--5 { flex-basis: 20% !important; }
  .rb-md-flex--6 { flex-basis: 16.6666% !important; }
  .rb-md-flex--auto { flex-basis: auto !important; }

  .rb-md-flex-direction--row { flex-direction: row !important; }
  .rb-md-flex-direction--column { flex-direction: column !important; }

  .rb-md-align-items--center { align-items: center !important; }
  .rb-md-justify-content--between { justify-content: space-between !important; }
}

@media (min-width: 62rem) {
  .rb-lg-flex--1 { flex-basis: 100% !important; }
  .rb-lg-flex--2 { flex-basis: 50% !important; }
  .rb-lg-flex--3 { flex-basis: 33.3333% !important; }
  .rb-lg-flex--4 { flex-basis: 25% !important; }
  .rb-lg-flex--5 { flex-basis: 20% !important; }
  .rb-lg-flex--6 { flex-basis: 16.6666% !important; }
  .rb-lg-flex--auto { flex-basis: auto !important; }

  .rb-lg-flex-direction--row { flex-direction: row !important; }
  .rb-lg-flex-direction--column { flex-direction: column !important; }

  .rb-lg-align-items--center { align-items: center !important; }
  .rb-lg-justify-content--between { justify-content: space-between !important; }
}

@media (min-width: 75rem) {
  .rb-xl-flex--1 { flex-basis: 100% !important; }
  .rb-xl-flex--2 { flex-basis: 50% !important; }
  .rb-xl-flex--3 { flex-basis: 33.3333% !important; }
  .rb-xl-flex--4 { flex-basis: 25% !important; }
  .rb-xl-flex--5 { flex-basis: 20% !important; }
  .rb-xl-flex--6 { flex-basis: 16.6666% !important; }
  .rb-xl-flex--auto { flex-basis: auto !important; }

  .rb-xl-flex-direction--row { flex-direction: row !important; }
  .rb-xl-flex-direction--column { flex-direction: column !important; }

  .rb-xl-align-items--center { align-items: center !important; }
  .rb-xl-justify-content--between { justify-content: space-between !important; }
}

@media (min-width: 100rem) {
  .rb-2xl-flex--1 { flex-basis: 100% !important; }
  .rb-2xl-flex--2 { flex-basis: 50% !important; }
  .rb-2xl-flex--3 { flex-basis: 33.3333% !important; }
  .rb-2xl-flex--4 { flex-basis: 25% !important; }
  .rb-2xl-flex--5 { flex-basis: 20% !important; }
  .rb-2xl-flex--6 { flex-basis: 16.6666% !important; }
  .rb-2xl-flex--auto { flex-basis: auto !important; }

  .rb-2xl-flex-direction--row { flex-direction: row !important; }
  .rb-2xl-flex-direction--column { flex-direction: column !important; }

  .rb-2xl-align-items--center { align-items: center !important; }
  .rb-2xl-justify-content--between { justify-content: space-between !important; }
}

/**
 * Układ `grid`
 */

.rb-grid-cols--1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.rb-grid-cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.rb-grid-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.rb-grid-cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.rb-grid-cols--5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.rb-grid-cols--6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.rb-grid-cols--7 { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
.rb-grid-cols--8 { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
.rb-grid-cols--9 { grid-template-columns: repeat(9, minmax(0, 1fr)) !important; }
.rb-grid-cols--10 { grid-template-columns: repeat(10, minmax(0, 1fr)) !important; }
.rb-grid-cols--11 { grid-template-columns: repeat(11, minmax(0, 1fr)) !important; }
.rb-grid-cols--12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }

.rb-grid-col--span-1 { grid-column: span 1 / span 1 !important; }
.rb-grid-col--span-2 { grid-column: span 2 / span 2 !important; }
.rb-grid-col--span-3 { grid-column: span 3 / span 3 !important; }
.rb-grid-col--span-4 { grid-column: span 4 / span 4 !important; }
.rb-grid-col--span-5 { grid-column: span 5 / span 5 !important; }
.rb-grid-col--span-6 { grid-column: span 6 / span 6 !important; }
.rb-grid-col--span-7 { grid-column: span 7 / span 7 !important; }
.rb-grid-col--span-8 { grid-column: span 8 / span 8 !important; }
.rb-grid-col--span-9 { grid-column: span 9 / span 9 !important; }
.rb-grid-col--span-10 { grid-column: span 10 / span 10 !important; }
.rb-grid-col--span-11 { grid-column: span 11 / span 11 !important; }
.rb-grid-col--span-12 { grid-column: span 12 / span 12 !important; }

@media (min-width: 28rem) {
  .rb-xs-grid-cols--1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .rb-xs-grid-cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .rb-xs-grid-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .rb-xs-grid-cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .rb-xs-grid-cols--5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .rb-xs-grid-cols--6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .rb-xs-grid-cols--7 { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
  .rb-xs-grid-cols--8 { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
  .rb-xs-grid-cols--9 { grid-template-columns: repeat(9, minmax(0, 1fr)) !important; }
  .rb-xs-grid-cols--10 { grid-template-columns: repeat(10, minmax(0, 1fr)) !important; }
  .rb-xs-grid-cols--11 { grid-template-columns: repeat(11, minmax(0, 1fr)) !important; }
  .rb-xs-grid-cols--12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }

  .rb-xs-grid-col--span-1 { grid-column: span 1 / span 1 !important; }
  .rb-xs-grid-col--span-2 { grid-column: span 2 / span 2 !important; }
  .rb-xs-grid-col--span-3 { grid-column: span 3 / span 3 !important; }
  .rb-xs-grid-col--span-4 { grid-column: span 4 / span 4 !important; }
  .rb-xs-grid-col--span-5 { grid-column: span 5 / span 5 !important; }
  .rb-xs-grid-col--span-6 { grid-column: span 6 / span 6 !important; }
  .rb-xs-grid-col--span-7 { grid-column: span 7 / span 7 !important; }
  .rb-xs-grid-col--span-8 { grid-column: span 8 / span 8 !important; }
  .rb-xs-grid-col--span-9 { grid-column: span 9 / span 9 !important; }
  .rb-xs-grid-col--span-10 { grid-column: span 10 / span 10 !important; }
  .rb-xs-grid-col--span-11 { grid-column: span 11 / span 11 !important; }
  .rb-xs-grid-col--span-12 { grid-column: span 12 / span 12 !important; }
}

@media (min-width: 36rem) {
  .rb-sm-grid-cols--1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .rb-sm-grid-cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .rb-sm-grid-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .rb-sm-grid-cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .rb-sm-grid-cols--5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .rb-sm-grid-cols--6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .rb-sm-grid-cols--7 { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
  .rb-sm-grid-cols--8 { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
  .rb-sm-grid-cols--9 { grid-template-columns: repeat(9, minmax(0, 1fr)) !important; }
  .rb-sm-grid-cols--10 { grid-template-columns: repeat(10, minmax(0, 1fr)) !important; }
  .rb-sm-grid-cols--11 { grid-template-columns: repeat(11, minmax(0, 1fr)) !important; }
  .rb-sm-grid-cols--12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }

  .rb-sm-grid-col--span-1 { grid-column: span 1 / span 1 !important; }
  .rb-sm-grid-col--span-2 { grid-column: span 2 / span 2 !important; }
  .rb-sm-grid-col--span-3 { grid-column: span 3 / span 3 !important; }
  .rb-sm-grid-col--span-4 { grid-column: span 4 / span 4 !important; }
  .rb-sm-grid-col--span-5 { grid-column: span 5 / span 5 !important; }
  .rb-sm-grid-col--span-6 { grid-column: span 6 / span 6 !important; }
  .rb-sm-grid-col--span-7 { grid-column: span 7 / span 7 !important; }
  .rb-sm-grid-col--span-8 { grid-column: span 8 / span 8 !important; }
  .rb-sm-grid-col--span-9 { grid-column: span 9 / span 9 !important; }
  .rb-sm-grid-col--span-10 { grid-column: span 10 / span 10 !important; }
  .rb-sm-grid-col--span-11 { grid-column: span 11 / span 11 !important; }
  .rb-sm-grid-col--span-12 { grid-column: span 12 / span 12 !important; }
}

@media (min-width: 48rem) {
  .rb-md-grid-cols--1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .rb-md-grid-cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .rb-md-grid-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .rb-md-grid-cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .rb-md-grid-cols--5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .rb-md-grid-cols--6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .rb-md-grid-cols--7 { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
  .rb-md-grid-cols--8 { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
  .rb-md-grid-cols--9 { grid-template-columns: repeat(9, minmax(0, 1fr)) !important; }
  .rb-md-grid-cols--10 { grid-template-columns: repeat(10, minmax(0, 1fr)) !important; }
  .rb-md-grid-cols--11 { grid-template-columns: repeat(11, minmax(0, 1fr)) !important; }
  .rb-md-grid-cols--12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }

  .rb-md-grid-col--span-1 { grid-column: span 1 / span 1 !important; }
  .rb-md-grid-col--span-2 { grid-column: span 2 / span 2 !important; }
  .rb-md-grid-col--span-3 { grid-column: span 3 / span 3 !important; }
  .rb-md-grid-col--span-4 { grid-column: span 4 / span 4 !important; }
  .rb-md-grid-col--span-5 { grid-column: span 5 / span 5 !important; }
  .rb-md-grid-col--span-6 { grid-column: span 6 / span 6 !important; }
  .rb-md-grid-col--span-7 { grid-column: span 7 / span 7 !important; }
  .rb-md-grid-col--span-8 { grid-column: span 8 / span 8 !important; }
  .rb-md-grid-col--span-9 { grid-column: span 9 / span 9 !important; }
  .rb-md-grid-col--span-10 { grid-column: span 10 / span 10 !important; }
  .rb-md-grid-col--span-11 { grid-column: span 11 / span 11 !important; }
  .rb-md-grid-col--span-12 { grid-column: span 12 / span 12 !important; }
}

@media (min-width: 62rem) {
  .rb-lg-grid-cols--1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .rb-lg-grid-cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .rb-lg-grid-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .rb-lg-grid-cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .rb-lg-grid-cols--5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .rb-lg-grid-cols--6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .rb-lg-grid-cols--7 { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
  .rb-lg-grid-cols--8 { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
  .rb-lg-grid-cols--9 { grid-template-columns: repeat(9, minmax(0, 1fr)) !important; }
  .rb-lg-grid-cols--10 { grid-template-columns: repeat(10, minmax(0, 1fr)) !important; }
  .rb-lg-grid-cols--11 { grid-template-columns: repeat(11, minmax(0, 1fr)) !important; }
  .rb-lg-grid-cols--12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }

  .rb-lg-grid-col--span-1 { grid-column: span 1 / span 1 !important; }
  .rb-lg-grid-col--span-2 { grid-column: span 2 / span 2 !important; }
  .rb-lg-grid-col--span-3 { grid-column: span 3 / span 3 !important; }
  .rb-lg-grid-col--span-4 { grid-column: span 4 / span 4 !important; }
  .rb-lg-grid-col--span-5 { grid-column: span 5 / span 5 !important; }
  .rb-lg-grid-col--span-6 { grid-column: span 6 / span 6 !important; }
  .rb-lg-grid-col--span-7 { grid-column: span 7 / span 7 !important; }
  .rb-lg-grid-col--span-8 { grid-column: span 8 / span 8 !important; }
  .rb-lg-grid-col--span-9 { grid-column: span 9 / span 9 !important; }
  .rb-lg-grid-col--span-10 { grid-column: span 10 / span 10 !important; }
  .rb-lg-grid-col--span-11 { grid-column: span 11 / span 11 !important; }
  .rb-lg-grid-col--span-12 { grid-column: span 12 / span 12 !important; }
}

@media (min-width: 75rem) {
  .rb-xl-grid-cols--1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .rb-xl-grid-cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .rb-xl-grid-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .rb-xl-grid-cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .rb-xl-grid-cols--5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .rb-xl-grid-cols--6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .rb-xl-grid-cols--7 { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
  .rb-xl-grid-cols--8 { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
  .rb-xl-grid-cols--9 { grid-template-columns: repeat(9, minmax(0, 1fr)) !important; }
  .rb-xl-grid-cols--10 { grid-template-columns: repeat(10, minmax(0, 1fr)) !important; }
  .rb-xl-grid-cols--11 { grid-template-columns: repeat(11, minmax(0, 1fr)) !important; }
  .rb-xl-grid-cols--12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }

  .rb-xl-grid-col--span-1 { grid-column: span 1 / span 1 !important; }
  .rb-xl-grid-col--span-2 { grid-column: span 2 / span 2 !important; }
  .rb-xl-grid-col--span-3 { grid-column: span 3 / span 3 !important; }
  .rb-xl-grid-col--span-4 { grid-column: span 4 / span 4 !important; }
  .rb-xl-grid-col--span-5 { grid-column: span 5 / span 5 !important; }
  .rb-xl-grid-col--span-6 { grid-column: span 6 / span 6 !important; }
  .rb-xl-grid-col--span-7 { grid-column: span 7 / span 7 !important; }
  .rb-xl-grid-col--span-8 { grid-column: span 8 / span 8 !important; }
  .rb-xl-grid-col--span-9 { grid-column: span 9 / span 9 !important; }
  .rb-xl-grid-col--span-10 { grid-column: span 10 / span 10 !important; }
  .rb-xl-grid-col--span-11 { grid-column: span 11 / span 11 !important; }
  .rb-xl-grid-col--span-12 { grid-column: span 12 / span 12 !important; }
}

@media (min-width: 100rem) {
  .rb-2xl-grid-cols--1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .rb-2xl-grid-cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .rb-2xl-grid-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .rb-2xl-grid-cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .rb-2xl-grid-cols--5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .rb-2xl-grid-cols--6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .rb-2xl-grid-cols--7 { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
  .rb-2xl-grid-cols--8 { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
  .rb-2xl-grid-cols--9 { grid-template-columns: repeat(9, minmax(0, 1fr)) !important; }
  .rb-2xl-grid-cols--10 { grid-template-columns: repeat(10, minmax(0, 1fr)) !important; }
  .rb-2xl-grid-cols--11 { grid-template-columns: repeat(11, minmax(0, 1fr)) !important; }
  .rb-2xl-grid-cols--12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }

  .rb-2xl-grid-col--span-1 { grid-column: span 1 / span 1 !important; }
  .rb-2xl-grid-col--span-2 { grid-column: span 2 / span 2 !important; }
  .rb-2xl-grid-col--span-3 { grid-column: span 3 / span 3 !important; }
  .rb-2xl-grid-col--span-4 { grid-column: span 4 / span 4 !important; }
  .rb-2xl-grid-col--span-5 { grid-column: span 5 / span 5 !important; }
  .rb-2xl-grid-col--span-6 { grid-column: span 6 / span 6 !important; }
  .rb-2xl-grid-col--span-7 { grid-column: span 7 / span 7 !important; }
  .rb-2xl-grid-col--span-8 { grid-column: span 8 / span 8 !important; }
  .rb-2xl-grid-col--span-9 { grid-column: span 9 / span 9 !important; }
  .rb-2xl-grid-col--span-10 { grid-column: span 10 / span 10 !important; }
  .rb-2xl-grid-col--span-11 { grid-column: span 11 / span 11 !important; }
  .rb-2xl-grid-col--span-12 { grid-column: span 12 / span 12 !important; }
}


/**
 * Atrybut `border`
 */
 
.rb-border-radius--full { border-radius: 3.40282e38px !important; }

/**
 * Animacja ładowania elementu `Skeleton screen` z efektem 'Shimmer'
 */

.rb-shimmer-placeholder {
  position: relative;
  overflow: hidden;
  background-color: var(--rb-shimmer-placeholder-background-color);
  border-color: var(--rb-shimmer-placeholder-border-color);
  pointer-events: none;
}

.rb-shimmer-placeholder::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--rb-shimmer-placeholder-color-mid) 35%,
    var(--rb-shimmer-placeholder-color-peak) 50%,
    var(--rb-shimmer-placeholder-color-mid) 65%,
    transparent 100%
  );
  background-size: 150% 100%;
  animation: rb-anim-shimmer-effect 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes rb-anim-shimmer-effect { 0% { background-position: 150% 0; } 100% { background-position: -150% 0; } }
@keyframes rb-anim-shimmer-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

/**
 * Animacja rysowania SVG
 */

svg.rb-anim-svg--draw path,
svg.rb-anim-svg--draw line {
  stroke-dasharray: 1; 
  stroke-dashoffset: 1;
  animation: rb-anim-svg-draw-1d var(--rb-anim-time-draw) ease-out forwards;
}

svg.rb-anim-svg--draw circle,
svg.rb-anim-svg--draw rect {
  clip-path: polygon(0% 100%, 0% 100%, 0% 100%, 0% 100%);
  animation: rb-anim-svg-draw-2d var(--rb-anim-time-draw) ease-out forwards;
}

@keyframes rb-anim-svg-draw-1d { to { stroke-dashoffset: 0; } }
@keyframes rb-anim-svg-draw-2d { to { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); } }