.cardGrid {
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(7,1fr);
  gap: 10px;
}

.cardGridImageMonday {
  background-image: url("/images/Calimari-300.webp");
   aspect-ratio: 1;
   border: 5px solid var(--primeBorderColour);
  border-radius: 50%;
  grid-column-start:  2;
  grid-column-end:  7;
  grid-row-start: 1;
  background-repeat: no-repeat;  
  background-size: contain;
  z-index: 1;
}

.cardGridImageTuesday {
   aspect-ratio: 1;
   border: 5px solid var(--primeBorderColour);
  border-radius: 50%;
  grid-column-start:  2;
  grid-column-end:  7;
  grid-row-start: 1;
  background-image: url("/images/Fishermans-300.webp");
  background-repeat: no-repeat;  
  background-size: contain;
  z-index: 1;
}

.cardGridImageWednesday {
   aspect-ratio: 1;
   border: 5px solid var(--primeBorderColour);
  border-radius: 50%;
  grid-column-start:  2;
  grid-column-end:  7;
  grid-row-start: 1;
  background-image: url("/images/FishAndChips-300.webp");
  background-repeat: no-repeat;  
  background-size: contain;
  z-index: 1;
}

.cardGridImageThursday {
   aspect-ratio: 1;
   border: 5px solid var(--primeBorderColour);
  border-radius: 50%;
  grid-column-start:  2;
  grid-column-end:  7;
  grid-row-start: 1;
  background-image: url("/images/Hamburger-300.webp");
  background-repeat: no-repeat;  
  background-size: contain;
  z-index: 1;
}

.cardGridImageFriday {
   aspect-ratio: 1;
   border: 5px solid var(--primeBorderColour);
  border-radius: 50%;
  grid-column-start:  2;
  grid-column-end:  7;
  grid-row-start: 1;
  background-image: url("/images/MealFour-300.webp");
  background-repeat: no-repeat;  
  background-size: contain;
  z-index: 1;
}

.cardGridImageSaturday {
   aspect-ratio: 1;
   border: 5px solid var(--primeBorderColour);
  background: green; 
  border-radius: 50%;
  grid-column-start:  2;
  grid-column-end:  7;
  grid-row-start: 1;
  background-image: url("/images/Breakfast-300.webp");
  background-repeat: no-repeat;  
  background-size: contain;
  z-index: 1;
}

.cardGridText {
  font-size: 2.2rem;
  text-align: center;
  z-index: 2;  
  color: #eeeeee;
  padding: 10px;
  grid-column-start:  1;
  grid-column-end: 8;
  grid-row-start: 1;
}

.cardGridText h2{
color: lightblue;
}
.cardGridText h3{
color: yellow;
}



.columns {
  display: grid;
   grid-template-columns: 1fr;
    padding-block: 2rem;
    margin-inline: auto;
  gap: 2rem;
}

/*
.columns div {
  background: lightgreen;

}
*/
@media (min-width: 600px) {
  .columns {
 
    grid-template-columns: 1fr 1fr;
    
    /* didn't mention this during the video
       but it ensures equal columns  */
    /*     grid-auto-columns: 1fr; */
   }
}

/* =========================
   GENERAL STYLES 
   NOT RELATED TO THE TIP
============================ */

/*

*,
*::before,
*::after {
  box-sizing: border-box;
}


:root {  
  --xxxprimeBorderColour: #35a6ed;
  --clr-primary: #ee6352;
  --clr-secondary: #d16e8d;
  --clr-accent: #F7F7FF;
  --clr-gradient: linear-gradient(-90deg, var(--clr-primary), var(--clr-secondary));
  --ff-title: bungee, sans-serif;
  --ff-body: canada-type-gibson,sans-serif;
  --fw-body: 300;
  --fw-bold: 800;
  --fw-title: 400;
  --fw-number: 800;
}
*/