/*-------------------------- GRID LAYOUT -------------------------*/

/*--- CONTAINER OR WRAPPER ---*/
.container {
  width: 100%;
  max-width: 1320px;
  padding: 0 calc(var(--gutter-spacing) * 0.5);
  margin: 0 auto;
}

@media only screen and (max-width: 85.375em) {
  .container {
    max-width: 1200px;
    padding: 0 15px;
  }
}

@media only screen and (max-width: 80em) {
  .container {
    max-width: 1190px;
  }
}

@media only screen and (max-width: 75em) {
  .container {
    max-width: 1090px;
  }
}

@media only screen and (max-width: 56.25em) {
  .container {
    max-width: 730px;
  }
}

/*--- FLUID CONTAINER SCALING 100% OF THE AVAILABLE WIDTH ---*/
.container-fluid {
  max-width: 100%;
}

@media only screen and (min-width: 27.5em) {
  .container-fluid-h-60 {
    padding: 0 60px;
  }
}

@media only screen and (min-width: 85.375em) {
  .container-fluid-h-100 {
    padding: 0 100px;
  }
}

@media only screen and (min-width: 87.5em) {
  .container-fluid-h-120 {
    padding: 0 120px;
  }
}

@media only screen and (min-width: 2000px) {
  .container-fluid-h-240 {
    padding: 0 240px;
  }
}

/*--- ROW GRID FOR A SINGLE ROW WITHIN A CONTAINER ---*/
/*
1. Generally, it allows to place elements in a horizontal manner
2. Extended by certain utility classes to add flexibility for showing 
elements in a stacked manner based on different screen resolutions
*/
.row-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  row-gap: 8rem;
}

@media only screen and (max-width: 56.25em) {
  .row-grid-md-dir-col {
    flex-direction: column;
  }

  .row-grid-md-dir-col-reverse {
    flex-direction: column-reverse;
    row-gap: 10rem;
  }
}

@media only screen and (max-width: 27.5em) {
  .row-grid-xs-dir-col {
    flex-direction: column !important;
  }
}

.row-grid:not(:last-child) {
  margin-bottom: 8rem;
}

@media only screen and (max-width: 56.25em) {
  .row-grid-md-dir-col:not(:last-child) {
    margin-bottom: 6rem;
  }
}

@media only screen and (max-width: 27.5em) {
  .row-grid-xs-dir-col:not(:last-child) {
    margin-bottom: 4rem;
  }
}

/*--- COLUMNS IN A ROW ---*/
/*
1. col-grid: Single column taking 100% of its parent
2. col-grid-2: Two columns each taking 50% of its parent
3. col-grid-3: Three columns each taking 33.33% of its parent
4. col-grid-4: Four columns each taking 25% of its parent
5. col-grid-30: Column taking 30% of its parent
6. col-grid-40: Column taking 40% of its parent
7. col-grid-60: Column taking 60% of its parent
8. col-grid-70: Column taking 70% of its parent
9. Extended by utility classes for different screen resolutions
*/
.row-grid > .col-grid {
  flex: 0 0 100%;
}

.row-grid > .col-grid-2 {
  flex: 0 0 calc(100% / 2);
}

.row-grid > .col-grid-3 {
  flex: 0 0 calc(100% / 3);
}

@media only screen and (max-width: 56.25em) {
  .row-grid-md-dir-col > .col-grid-3:not(:last-child) {
    margin-bottom: 6rem;
  }
}

@media only screen and (max-width: 27.5em) {
  .row-grid-xs-dir-col > .col-grid-3:not(:last-child) {
    margin-bottom: 4rem;
  }
}

.row-grid > .col-grid-4 {
  flex: 0 0 calc(100% / 4);
}

.row-grid > .col-grid-30 {
  flex: 0 0 calc(30%);
}

.row-grid > .col-grid-40 {
  flex: 0 0 calc(40%);
}

.row-grid > .col-grid-60 {
  flex: 0 0 calc(60%);
}

.row-grid > .col-grid-70 {
  flex: 0 0 calc(70%);
}

/*-------------------------- GRID LAYOUT -------------------------*/