.d0badmintongrid {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* left column | right column */
  grid-template-rows: 1fr 1fr;      /* two equal rows */
  gap: 20px;
  max-width: 1500px;
  margin: 0 auto;
  min-height: 600px;
}

/* Left box spans both rows */
.d0badmintongrid .d0left {
  grid-column: 1;
  grid-row: 1 / span 2;
}

/* Top-right box */
.d0badmintongrid .d0topright {
  grid-column: 2;
  grid-row: 1;
}

/* Bottom-right wrapper holds two boxes side by side */
.d0badmintongrid .d0bottomright {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* ===== Box styling ===== */
.d0imgbox01, .d0imgbox02, .d0imgbox03, .d0imgbox04 {
  padding: 0px;
  min-height: 150px;
  height: 100%;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  box-sizing: border-box;
}

.d0imgbox01 { background-image: url(/shared/images/content/bus_54791/Badminton-Sports-Gear-Imgbox01.webp);}
.d0imgbox02 { background-image: url(/shared/images/content/bus_54791/Badminton-Sports-Gear-Imgbox02.webp);}
.d0imgbox03 { background-image: url(/shared/images/content/bus_54791/Badminton-Sports-Gear-Imgbox03.webp);}
.d0imgbox04 { background-image: url(/shared/images/content/bus_54791/Badminton-Sports-Gear-Imgbox04.webp);}
.d0imgbox05 { background-image: url(/shared/images/content/bus_54791/Badminton-Sports-Gear-Imgbox01.webp); min-height: 580px;}
.d0imgbox06 { background-image: url(/shared/images/content/bus_54791/Badminton-Sports-Gear-Imgbox01.webp); min-height: 580px;}

.d0overlaybox, .d0overlaybox2 {
  background: linear-gradient(0deg, #111 0%, transparent 60%);
  padding: 20px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
  color: #ddf0f7;
  border: 3px solid #fff;
  cursor: pointer;
}

.d0overlaybox3 {
  background: linear-gradient(0deg, #111 0%, transparent 60%);
  padding: 20px;
  width: 100%;
  min-height: 580px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
  color: #ddf0f7;
  cursor: pointer;
}

.d0overlaybox2 { background: linear-gradient(0deg, #111 0%, transparent 95%); }

.d0overlaybox h3, .d0overlaybox2 h3 {
  margin: 0 0 8px 0;
}
.d0overlaybox p, .d0overlaybox2 p {
  margin: 0;
}

/* ===== Mobile: stack everything in one column ===== */
@media (max-width: 799px) {
  .d0badmintongrid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .d0badmintongrid .d0left,
  .d0badmintongrid .d0topright {
    grid-column: 1;
    grid-row: auto;
  }
  .d0badmintongrid .d0bottomright {
    grid-column: 1;
    grid-row: auto;
    grid-template-columns: 1fr 1fr; /* keep the pair side by side even on mobile */
  }
  .d0imgbox01, .d0imgbox02, .d0imgbox03, .d0imgbox04 {
    min-height: 200px;
  }
  .d0overlaybox, .d0overlaybox2 { background: linear-gradient(0deg, #111 10%, transparent 100%); }
}

/* Optional: stack the bottom pair too on very small screens */
@media (max-width: 480px) {
  .d0badmintongrid .d0bottomright {
    grid-template-columns: 1fr;
  }
}