html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: sans; 
}
    #BeresfordTitle {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
         /* Centers the text */
        z-index: 2; /* Higher z-index to appear on top */
        color: rgb(235, 118, 51); /* Example text color */
        text-align: center;
           text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

    font-family: sans; 
        /* Add other styling for your text, e.g., font-size, text-shadow */
    }
.parent {
  display: grid;
  /* Responsive layout: 10 columns, 14 rows that scale */
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(14, 1fr);
  grid-column-gap: 0;
  grid-row-gap: 0;

  width: 100vw;
  height: 100vh;

  border: 2px solid black;
  box-sizing: border-box;
  overflow: hidden; /* Prevent anything from escaping grid */
}

/* Each grid section outlined */
.parent > div {
  border: 1px solid black;
  box-sizing: border-box;
  overflow: hidden; /* Keep content inside each grid area */
}

/* Grid areas */
.div1 {
  grid-area: 1 / 1 / 7 / 6;
  background-color: aqua;
    position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  zoom: 250%;
      filter: grayscale(50%);
}

.div2 {
  grid-area: 1 / 6 / 7 / 11;
  background-color: lightgray;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Ensures carousel stays inside the grid area */
}

.div3 {
  grid-area: 7 / 1 / 9 / 11;
  background-color: rgb(243, 208, 191);
}

.div4 {
  grid-area: 9 / 1 / 15 / 8;
  background-color: rgb(231, 185, 185);
  width: 100%
  
}

.div5 {
  grid-area: 9 / 8 / 14 / 11;
  background-color: lightgray;
  
}

.div6 {
  grid-area: 14 / 8 / 15 / 11;
  background-color: rgb(172, 167, 167);
  text-align: center;
  
}

#beresnews {
  font-size: 30px;
  font-family: sans-serif; 
  text-decoration: underline;
}
#upcoming {
  font-size: 30px;
  font-family: sans-serif; 
}

.active {
  background-color: #717171;
}

/* Fading animation */




@media (max-width: 768px) {
  .parent {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, auto);
    width: 100vw;
    height: auto; /* height grows as needed */
  }

  /* Show div1 normally */
  .div1 {
    grid-area: 1 / 1 / 2 / 2;
    zoom: 200%; /* reset zoom */
    height: 30vh; /* or whatever height you prefer */
    overflow: hidden;
    filter: grayscale(50%);
  }


  /* Hide div2 completely on mobile */
  .div2 {
    grid-area: 2 / 1 / 3 / 2;
    height: 50vh;
    overflow: hidden;
  }

  /* Move div3, div4, div5, div6 up, stacked below div1 */
  .div3 {
  grid-area: 3 / 1 / 4 / 2;
  }

  .div4 {
    grid-area: 3 / 1 / 4 / 2;
  }

  .div5 {
    grid-area: 4 / 1 / 5 / 2;
    overflow: hidden;
    height:50vh;
  }

  .div6 {
    grid-area: 5 / 1 / 6 / 2;
  }


    #BeresfordTitle {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
         /* Centers the text */
        z-index: 2; /* Higher z-index to appear on top */
        color: rgb(235, 118, 51); /* Example text color */
        text-align: center;
           text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

    font-family: sans; 
        /* Add other styling for your text, e.g., font-size, text-shadow */
    }







}