/* ============================================
   Standard Parent Grids
     /*   1 2 3 4
     1 -|-|-|-
     2 -|-|-|-
     3 -|-|-|-
     4 -|-|-|- 
     Row first then column for naming

       1 2 3 
     1 -|-|-
     2 -|-|-
     3 -|-|-
     
     Row first then column for naming     
   ============================================ */
.container3by3 {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: repeat(3, auto);
  align-content: stretch;
  justify-items: stretch;
  gap: 10px;
  height: 100%;
  width: 100%;
} 


.container4by4 {  
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-template-rows: repeat(4, auto);
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

/* ============================================
   Standard Children Containers for 4 by 4 Grid
   ============================================ */

.OneTwo-OneThree {   
  justify-items: center;
  grid-row: 1 / 1;
  grid-column: 2 / 3;
  }
  /*   1 2 3 4
     1 -|x|x|-
     2 -|-|-|-
     3 -|-|-|-
     4 -|-|-|- 
     Row first then column for naming*/


.TwoFour-One {   
  grid-row: 1;
  grid-column: 2 / 4;
  }


.TwoFour-TwoThree {   
  grid-row: 2 / 3;
  grid-column: 2 / 4;
  }


.ThreeOne-FourTwo {
  grid-row: 3 / 4;
  grid-column: 1 / 2;
  /*   1 2 3 4
     1 -|-|-|-
     2 -|-|-|-
     3 x|x|-|-
     4 x|x|-|- 
     Row first then column for naming*/
}

.ThreeTwo-FourThree {
  grid-row: 3 / 4;
  grid-column: 2 / 3;
    /* 1 2 3 4
     1 -|-|-|-
     2 -|-|-|-
     3 -|x|x|-
     4 -|x|x|- 
     Row first then column for naming*/
}

.ThreeThree-FourFour {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
    /*   1 2 3 4
     1 -|-|-|-
     2 -|-|-|-
     3 -|-|x|x
     4 -|-|x|x 
     Row first then column for naming*/
}

.OneOne-FourOne {
  grid-row: 1 / 5;
  grid-column: 1 / 2;
    /* 1 2 3 4
     1 x|-|-|-
     2 x|-|-|-
     3 x|-|-|-
     4 x|-|-|- 
     Row first then column for naming*/
}

.OneTwo-FourFour {
  grid-row: 1 / 5;
  grid-column: 2 / 5;
    /* 1 2 3 4
     1 -|x|x|x
     2 -|x|x|x  
     3 -|x|x|x
     4 -|x|x|x 
     Row first then column for naming*/
}

.TwoTwo-ThreeTwo {
  grid-row: 2 / 3;
  grid-column: 2 / 2;
    /*  1 2 3 4
     1 -|-|-|-
     2 -|x|x|-
     3 -|x|x|-
     4 -|-|-|- 
     Row first then column for naming*/
}

.OneTwo-TwoThree {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
    /* 1 2 3 4
     1 -|-|-|-
     2 x|x|-|-
     3 x|x|-|-
     4 -|-|-|- 
     Row first then column for naming*/
}

.ThreeFour-TwoThree {
  grid-row: 2 / 3;
  grid-column: 3 / 4;
    /* 1 2 3 4
     1 -|-|-|-
     2 -|-|x|x
     3 -|-|x|x
     4 -|-|-|- 
     Row first then column for naming*/
}

.ThreeFour-TwoThree {
  grid-row: 2 / 3;
  grid-column: 2 / 4;
  justify-self: stretch;
  width: 100%; 
    /* 1 2 3 4
     1 -|-|-|-
     2 -|x|x|x
     3 -|x|x|x
     4 -|-|-|- 
     Row first then column for naming*/
}

.ThreeThree-FourFour {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
    /*   1 2 3 4
     1 -|-|-|-
     2 -|-|-|-
     3 -|-|x|x
     4 -|-|x|x 
     Row first then column for naming*/
}

.OneTwo-OneFour {
  grid-row: 1 / 2;
  grid-column: 2 / 5;
    /* 1 2 3 4
     1 -|x|x|x
     2 -|-|-|-
     3 -|-|-|-
     4 -|-|-|- 
     Row first then column for naming*/
}

/* ============================================
   Standard Children Containers for 3 by 3 Grid
   ============================================ */
.One-One {   
  justify-content: center;
  align-items: center;     
  grid-row: 1;
  grid-column: 1;
  /*   
       1 2 3 
     1 x|-|-
     2 -|-|-
     3 -|-|-
     Row first then column for naming*/
}

.Two-One {   
  justify-content: center;
  align-items: center;     
  grid-row: 2;
  grid-column: 1;
  /*   
       1 2 3 
     1 -|-|-
     2 x|-|-
     3 -|-|-
     Row first then column for naming*/
}   

.Two-Two {   
  justify-content: center;
  align-items: center;     
  grid-row: 2;
  grid-column: 2;
  /*   
       1 2 3 
     1 -|-|-
     2 -|x|-
     3 -|-|-
     Row first then column for naming*/
} 

.Two-Three {   
  justify-content: center;
  align-items: center;     
  grid-row: 2;
  grid-column: 3;
  /*   
       1 2 3 
     1 -|-|-
     2 -|-|x
     3 -|-|-
     Row first then column for naming*/
} 

/* about-spacing: scoped modifier for About Us page padding */
.Two-One.about-spacing,
.Two-Two.about-spacing,
.Two-Three.about-spacing {
    padding-left: var(--spacing-xl);
    padding-right: var(--spacing-xl);
}

.One-Two {   
  justify-content: center;
  align-items: center;     
  grid-row: 1;
  grid-column: 2;
  /*   
       1 2 3 
     1 -|x|-
     2 -|-|-
     3 -|-|-
     Row first then column for naming*/
}

.Three-One {
  grid-row: 3;
  grid-column: 1;
  /* 
       1 2 3 
     1 -|-|-
     2 -|-|-
     3 x|-|-
     Row first then column for naming*/
}

.Three-Two {
  grid-row: 3;
  grid-column: 2;
  /* 
       1 2 3 
     1 -|-|-
     2 -|-|-
     3 -|x|-
     Row first then column for naming*/
}

.Three-Three {
  grid-row: 3;
  grid-column: 3;
  /* 
       1 2 3 
     1 -|-|-
     2 -|-|-
     3 -|-|x
     Row first then column for naming*/
}

.OneThree-Two {   
  justify-content: center;
  align-items: center;     
  grid-row: 1 / 3;
  grid-column: 2;
  /*   
       1 2 3 
     1 -|x|-
     2 -|x|-
     3 -|x|-
     Row first then column for naming*/
}

.OneTwo-Two {   
  justify-content: center;
  align-items: center;     
  grid-row: 1 / 3;
  grid-column: 2;
  /*   
       1 2 3 
     1 -|x|-
     2 -|x|-
     3 -|-|-
     Row first then column for naming*/
}

.Two-TwoThree {   
  justify-content: center;
  align-items: center;     
  grid-row: 2 / 3;
  grid-column: 2;
  /*   
       1 2 3 
     1 -|-|-
     2 -|x|-
     3 -|x|-
     Row first then column for naming*/
}

.OneTwo-One {   
  justify-content: center;
  align-items: center;     
  grid-row: 1 / 3;
  grid-column: 1 / 2;
  /*   
       1 2 3 
     1 x|-|-
     2 x|-|-
     3 -|-|-
     Row first then column for naming*/
}

/* Testing cell numbers in grids */
.single-4by4-cell { 
  align-self: center;
}

/* ============================================
   Standard helper classes
   ============================================ */
.Waves_Icon { /* Bullet point used in About Us page. Needs a proper home */
  justify-self: center;
  align-self: center;
  padding-bottom: 10px;
}

.extra-space-sm {
  height: 25px;
}

.extra-space {
  height: 50px;
}

.extra-space-lg {
  height: 75px;
}


/* ============================================
   Kept until we fix index.html. Will be deleted after we clean it up
   ============================================ */

.image-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1rem;
}

.image-grid img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 12px;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
  .content-wrapper {
    grid-template-columns: 1fr;
  }
}