.main-container {
   --container-width: 90%;
   width: var(--container-width);
   margin: 0 auto;
   position: relative;
}

@media (max-width: 1440px) {
   .main-container,
   .container {
      max-width: 1360px;
   }
}

@media (max-width: 1200px) {
   .main-container,
   .container {
      max-width: 1140px;
   }
}

@media (max-width: 992px) {
   .main-container,
   .container {
      max-width: 960px;
   }
}

@media (max-width: 768px) {
   .main-container,
   .container {
      max-width: 730px;
   }
}

@media (max-width: 570px) {
   .main-container,
   .container {
      max-width: 556px;
   }
}


@media (max-width: 370px) {
   .main-container,
   .container {
      max-width: 360px;
   }
}



.grid {
   display: grid;
   gap: 1rem;
}

.grid-nogap {
   gap: 0 !important;
}

.grid-cols-1 {
   grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
   grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
   grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-5 {
   grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols-6 {
   grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid-cols-7 {
   grid-template-columns: repeat(7, minmax(0, 1fr));
}

.grid-cols-8 {
   grid-template-columns: repeat(8, minmax(0, 1fr));
}

.grid-cols-9 {
   grid-template-columns: repeat(9, minmax(0, 1fr));
}

.grid-cols-10 {
   grid-template-columns: repeat(10, minmax(0, 1fr));
}

.grid-cols-11 {
   grid-template-columns: repeat(11, minmax(0, 1fr));
}

.grid-cols-12 {
   grid-template-columns: repeat(12, minmax(0, 1fr));
}

@media (min-width: 370px) {
   .xs\:grid-cols-1 {
      grid-template-columns: repeat(1, minmax(0, 1fr));
   }

   .xs\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .xs\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
   }

   .xs\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
   }

   .xs\:grid-cols-5 {
      grid-template-columns: repeat(5, minmax(0, 1fr));
   }

   .xs\:grid-cols-6 {
      grid-template-columns: repeat(6, minmax(0, 1fr));
   }

   .xs\:grid-cols-7 {
      grid-template-columns: repeat(7, minmax(0, 1fr));
   }

   .xs\:grid-cols-8 {
      grid-template-columns: repeat(8, minmax(0, 1fr));
   }

   .xs\:grid-cols-9 {
      grid-template-columns: repeat(9, minmax(0, 1fr));
   }

   .xs\:grid-cols-10 {
      grid-template-columns: repeat(10, minmax(0, 1fr));
   }

   .xs\:grid-cols-11 {
      grid-template-columns: repeat(11, minmax(0, 1fr));
   }

   .xs\:grid-cols-12 {
      grid-template-columns: repeat(12, minmax(0, 1fr));
   }
}

@media (min-width: 570px) {
   .sm\:grid-cols-1 {
      grid-template-columns: repeat(1, minmax(0, 1fr));
   }

   .sm\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .sm\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
   }

   .sm\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
   }

   .sm\:grid-cols-5 {
      grid-template-columns: repeat(5, minmax(0, 1fr));
   }

   .sm\:grid-cols-6 {
      grid-template-columns: repeat(6, minmax(0, 1fr));
   }

   .sm\:grid-cols-7 {
      grid-template-columns: repeat(7, minmax(0, 1fr));
   }

   .sm\:grid-cols-8 {
      grid-template-columns: repeat(8, minmax(0, 1fr));
   }

   .sm\:grid-cols-9 {
      grid-template-columns: repeat(9, minmax(0, 1fr));
   }

   .sm\:grid-cols-10 {
      grid-template-columns: repeat(10, minmax(0, 1fr));
   }

   .sm\:grid-cols-11 {
      grid-template-columns: repeat(11, minmax(0, 1fr));
   }

   .sm\:grid-cols-12 {
      grid-template-columns: repeat(12, minmax(0, 1fr));
   }
}

@media (min-width: 768px) {
   .md\:grid-cols-1 {
      grid-template-columns: repeat(1, minmax(0, 1fr));
   }

   .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .md\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
   }

   .md\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
   }

   .md\:grid-cols-5 {
      grid-template-columns: repeat(5, minmax(0, 1fr));
   }

   .md\:grid-cols-6 {
      grid-template-columns: repeat(6, minmax(0, 1fr));
   }

   .md\:grid-cols-7 {
      grid-template-columns: repeat(7, minmax(0, 1fr));
   }

   .md\:grid-cols-8 {
      grid-template-columns: repeat(8, minmax(0, 1fr));
   }

   .md\:grid-cols-9 {
      grid-template-columns: repeat(9, minmax(0, 1fr));
   }

   .md\:grid-cols-10 {
      grid-template-columns: repeat(10, minmax(0, 1fr));
   }

   .md\:grid-cols-11 {
      grid-template-columns: repeat(11, minmax(0, 1fr));
   }

   .md\:grid-cols-12 {
      grid-template-columns: repeat(12, minmax(0, 1fr));
   }
}

@media (min-width: 992px) {
   .lg\:grid-cols-1 {
      grid-template-columns: repeat(1, minmax(0, 1fr));
   }

   .lg\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .lg\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
   }

   .lg\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
   }

   .lg\:grid-cols-5 {
      grid-template-columns: repeat(5, minmax(0, 1fr));
   }

   .lg\:grid-cols-6 {
      grid-template-columns: repeat(6, minmax(0, 1fr));
   }

   .lg\:grid-cols-7 {
      grid-template-columns: repeat(7, minmax(0, 1fr));
   }

   .lg\:grid-cols-8 {
      grid-template-columns: repeat(8, minmax(0, 1fr));
   }

   .lg\:grid-cols-9 {
      grid-template-columns: repeat(9, minmax(0, 1fr));
   }

   .lg\:grid-cols-10 {
      grid-template-columns: repeat(10, minmax(0, 1fr));
   }

   .lg\:grid-cols-11 {
      grid-template-columns: repeat(11, minmax(0, 1fr));
   }

   .lg\:grid-cols-12 {
      grid-template-columns: repeat(12, minmax(0, 1fr));
   }
}

@media (min-width: 1200px) {
   .xl\:grid-cols-1 {
      grid-template-columns: repeat(1, minmax(0, 1fr));
   }

   .xl\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .xl\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
   }

   .xl\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
   }

   .xl\:grid-cols-5 {
      grid-template-columns: repeat(5, minmax(0, 1fr));
   }

   .xl\:grid-cols-6 {
      grid-template-columns: repeat(6, minmax(0, 1fr));
   }

   .xl\:grid-cols-7 {
      grid-template-columns: repeat(7, minmax(0, 1fr));
   }

   .xl\:grid-cols-8 {
      grid-template-columns: repeat(8, minmax(0, 1fr));
   }

   .xl\:grid-cols-9 {
      grid-template-columns: repeat(9, minmax(0, 1fr));
   }

   .xl\:grid-cols-10 {
      grid-template-columns: repeat(10, minmax(0, 1fr));
   }

   .xl\:grid-cols-11 {
      grid-template-columns: repeat(11, minmax(0, 1fr));
   }

   .xl\:grid-cols-12 {
      grid-template-columns: repeat(12, minmax(0, 1fr));
   }
}

@media (min-width: 1440px) {
   .\2xl\:grid-cols-1 {
      grid-template-columns: repeat(1, minmax(0, 1fr));
   }

   .\2xl\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .\2xl\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
   }

   .\2xl\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
   }

   .\2xl\:grid-cols-5 {
      grid-template-columns: repeat(5, minmax(0, 1fr));
   }

   .\2xl\:grid-cols-6 {
      grid-template-columns: repeat(6, minmax(0, 1fr));
   }

   .\2xl\:grid-cols-7 {
      grid-template-columns: repeat(7, minmax(0, 1fr));
   }

   .\2xl\:grid-cols-8 {
      grid-template-columns: repeat(8, minmax(0, 1fr));
   }

   .\2xl\:grid-cols-9 {
      grid-template-columns: repeat(9, minmax(0, 1fr));
   }

   .\2xl\:grid-cols-10 {
      grid-template-columns: repeat(10, minmax(0, 1fr));
   }

   .\2xl\:grid-cols-11 {
      grid-template-columns: repeat(11, minmax(0, 1fr));
   }

   .\2xl\:grid-cols-12 {
      grid-template-columns: repeat(12, minmax(0, 1fr));
   }
}



.items-center {
   align-items: center;
}