/* ==================================================
   GLOBAL LAYOUT
================================================== */

:root {

  --container-max-width: 1360px;

  --container-desktop-offset: 80px;

  --container-tablet-offset: 192px;

  --container-mobile-offset: 32px;

  --grid-gap: 20px;

}


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

.site-container {

  width: calc(100% - var(--container-desktop-offset));

  max-width: var(--container-max-width);

  margin-inline: auto;

}


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

.site-grid {

  display: grid;

  grid-template-columns: repeat(12, minmax(0, 1fr));

  column-gap: var(--grid-gap);

}


/* ==================================================
   TABLET
================================================== */

@media (min-width: 768px) and (max-width: 1024px) {

  .site-container {

    width: calc(100% - var(--container-tablet-offset));

  }

  .site-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

    column-gap: 20px;

  }

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 767px) {

  .site-container {

    width: calc(100% - var(--container-mobile-offset));

  }

  .site-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

    column-gap: 20px;

  }

}