/* Cards */
.grid--cards {
}

.grid--cards > :nth-child(1) {
  grid-column: 1 / 7; 
  grid-row: 1;
}

.grid--cards > :nth-child(2) {
  grid-column: 7 / 10; 
  grid-row: 1;
}

.grid--cards > :nth-child(3) {
  grid-column: 10 / 13; 
  grid-row: 1 / span 2;
}

.grid--cards > :nth-child(4) {
  grid-column: 1 / 4;  
  grid-row: 2;
}

.grid--cards > :nth-child(5) {
  grid-column: 4 / 10; 
  grid-row: 2;
}

.grid--cards > :nth-child(6) {
  grid-column: 1 / 7; 
  grid-row: 3;
}

.grid--cards > :nth-child(7) {
  grid-column: 7 / 10; 
  grid-row: 3;
}

.grid--cards > :nth-child(8) {
  grid-column: 10 / 13; 
  grid-row: 3;
}

@media (max-width: 576px) {
    .grid--cards {
    }
    
    .grid--cards  > :nth-child(1) {
      grid-column: 1 / 7; 
      grid-row: 1;
    }
    
    .grid--cards  > :nth-child(2) {
      grid-column: 7 / 13; 
      grid-row: 1;
    }
    
    .grid--cards > :nth-child(3) {
      grid-column: 1 / 7; 
      grid-row: 2;
    }
    
    .grid--cards  > :nth-child(4) {
      grid-column: 7 / 13;  
      grid-row: 2;
    }
    
    .grid--cards  > :nth-child(5) {
      grid-column: 1 / 7;
      grid-row: 3;
    }

    .grid--cards  > :nth-child(6) {
      grid-column: 7 / 13;
      grid-row: 3;
    }

    .grid--cards  > :nth-child(7) {
      grid-column: 1 / 7;
      grid-row: 4;
    }

    .grid--cards  > :nth-child(8) {
      grid-column: 7 / 13;
      grid-row: 4;
    }
}
@media (min-width: 577px) and (max-width: 768px) {
    .grid--cards {
    }
    
    .grid--cards  > :nth-child(1) {
      grid-column: 1 / 7; 
      grid-row: 1;
    }
    
    .grid--cards  > :nth-child(2) {
      grid-column: 7 / 13; 
      grid-row: 1;
    }
    
    .grid--cards > :nth-child(3) {
      grid-column: 1 / 7; 
      grid-row: 2;
    }
    
    .grid--cards  > :nth-child(4) {
      grid-column: 7 / 13;  
      grid-row: 2;
    }
    
    .grid--cards  > :nth-child(5) {
      grid-column: 1 / 7;
      grid-row: 3;
    }

    .grid--cards  > :nth-child(6) {
      grid-column: 7 / 13;
      grid-row: 3;
    }

    .grid--cards  > :nth-child(7) {
      grid-column: 1 / 7;
      grid-row: 4;
    }

    .grid--cards  > :nth-child(8) {
      grid-column: 7 / 13;
      grid-row: 4;
    }
}
@media (min-width: 769px) and (max-width: 992px) {
    .grid--cards {
    }
    
    .grid--cards  > :nth-child(1) {
      grid-column: 1 / 7; 
      grid-row: 1;
    }
    
    .grid--cards  > :nth-child(2) {
      grid-column: 7 / 13; 
      grid-row: 1;
    }
    
    .grid--cards > :nth-child(3) {
      grid-column: 1 / 7; 
      grid-row: 2;
    }
    
    .grid--cards  > :nth-child(4) {
      grid-column: 7 / 13;  
      grid-row: 2;
    }
    
    .grid--cards  > :nth-child(5) {
      grid-column: 1 / 7;
      grid-row: 3;
    }

    .grid--cards  > :nth-child(6) {
      grid-column: 7 / 13;
      grid-row: 3;
    }

    .grid--cards  > :nth-child(7) {
      grid-column: 1 / 7;
      grid-row: 4;
    }

    .grid--cards  > :nth-child(8) {
      grid-column: 7 / 13;
      grid-row: 4;
    }

    
    .grid--cards  > :nth-child(9) {
      grid-column: 1 / 7;
      grid-row: 5;
    }

    .grid--cards  > :nth-child(10) {
      grid-column: 7 / 13;
      grid-row: 5;
    }
}
@media (min-width: 993px) and (max-width: 1366px) {
    .grid--cards  > :nth-child(1) {
        grid-column: 1 / 7; 
        grid-row: 1;
      }
      
      .grid--cards  > :nth-child(2) {
        grid-column: 7 / 13; 
        grid-row: 1;
      }
      
      .grid--cards > :nth-child(3) {
        grid-column: 1 / 7; 
        grid-row: 2;
      }
      
      .grid--cards  > :nth-child(4) {
        grid-column: 7 / 13;  
        grid-row: 2;
      }
      
      .grid--cards  > :nth-child(5) {
        grid-column: 1 / 7;
        grid-row: 3;
      }
  
      .grid--cards  > :nth-child(6) {
          grid-column: 7 / 13;
          grid-row: 3;
        }

              
      .grid--cards  > :nth-child(7) {
        grid-column: 1 / 7;
        grid-row: 4;
      }
  
      .grid--cards  > :nth-child(8) {
          grid-column: 7 / 13;
          grid-row: 4;
        }

        .grid--cards  > :nth-child(9) {
          grid-column: 1 / 7;
          grid-row: 5;
        }
    
        .grid--cards  > :nth-child(10) {
          grid-column: 7 / 13;
          grid-row: 5;
        }
}
@media (min-width: 1400px) {}