.grid--1 {
  display: grid !important;
  grid-template-columns: 1fr;
}
.grid--2 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid--3 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr))
}
.grid--4 {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid--5 {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid--6 {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.grid--1-2 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
.grid--2-1 {
  display: grid !important;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
.grid--1-3 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
}
.grid--3-1 {
  display: grid !important;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
}
.grid--2-3 {
  display: grid !important;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
}
.grid--3-2 {
  display: grid !important;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}
@media (max-width: 991px){
  .grid--l-1 {
    grid-template-columns: 1fr;
  }
  .grid--l-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid--l-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid--l-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .grid--l-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .grid--l-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
@media (max-width: 767px){
  .grid--m-1 {
    grid-template-columns: 1fr;
  }
  .grid--m-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid--m-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid--m-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .grid--m-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .grid--m-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
@media (max-width: 479px){
  .grid--s-1 {
    grid-template-columns: 1fr;
  }
  .grid--s-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid--s-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid--s-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .grid--s-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .grid--s-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
.gap--xs {
  gap: 5px; 
}
.gap--s {
  gap: 10px;
}
.gap--m {
  gap: 20px;
}
.gap--l {
  gap: 30px;
}
.gap--xl {
  gap: 40px;
}
.gap--2xl {
  gap: 50px;
}
h1 {
  font-size: 48px;
  font-size: clamp(32px, calc(0.625vw + calc(48px - 12px)), calc(48px * 1.6));
}
h2 {
  font-size: 42px;
  font-size: clamp(28px, calc(0.625vw + calc(42px - 12px)), calc(42px * 1.6));
}
h3 {
  font-size: 36px;
  font-size: clamp(24px, calc(0.625vw + calc(36px - 12px)), calc(36px * 1.6));
}
h4 {
  font-size: 32px;
  font-size: clamp(20px, calc(0.625vw + calc(32px - 12px)), calc(32px * 1.6));
}
h5 {
  font-size: 28px;
  font-size: clamp(18px, calc(0.625vw + calc(28px - 12px)), calc(28px * 1.6));
}
h6 {
  font-size: 24px;
  font-size: clamp(16px, calc(0.625vw + calc(24px - 12px)), calc(24px * 1.6));
}
.order--first {
  order: -1;
}
.order--last {
  order: 999;
}