/* ==========================================================================
   CONTAINER
========================================================================== */

.container {
  width: min(var(--container), calc(100% - 40px));
  margin-inline: auto;
}

/* ==========================================================================
   PAGE
========================================================================== */

main {
  position: relative;
  overflow: hidden;
}

/* ==========================================================================
   SECTIONS
========================================================================== */

.section {
  position: relative;
  padding: var(--section-spacing) 0;
}

/* ==========================================================================
   GRID
========================================================================== */

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

/* ==========================================================================
   RESPONSIVE
========================================================================== */

@media (max-width: 991px) {
  .container {
    width: min(var(--container), calc(100% - 30px));
  }

  .section {
    padding: 80px 0;
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}