.section {
  /* min-height: 100vh; */
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  /* grid-template-rows: repeat(3, 1fr); */
  grid-template-rows: auto;
  gap: 15px;
}
.section-66 {
  min-height: 66vh;
  /* grid-template-rows: repeat(2, 1fr); */
}
#soft-drinks {
  grid-area: soft-drinks;
}
#digestif-drinks {
  grid-area: digestif-drinks;
}
#nos-bouteilles {
  grid-area: nos-bouteilles;
}

#img14 {
  grid-area: img14;
  background-image: url("/assets/photos/4k/DSC09662_PSMS.jpg");
}
#img15 {
  grid-area: img15;
  background-image: url("/assets/photos/4k/DSC09750_PSMS.jpg");
}
#img16 {
  grid-area: img16;
  background-image: url("/assets/photos/4k/DSC09706_PSMS.jpg");
}
#img17 {
  grid-area: img17;
  background-image: url("/assets/photos/4k/DSC09742_PSMS.jpg");
}
#img18 {
  grid-area: img18;
  background-image: url("/assets/photos/4k/DSC09766_PSMS.jpg");
}
#img19 {
  grid-area: img19;
  background-image: url("/assets/photos/4k/DSC09986.jpg");
}
#img20 {
  grid-area: img20;
  background-image: url("/assets/photos/4k/DSC09738_PSMS.jpg");
}
#img21 {
  grid-area: img21;
  background-image: url("/assets/photos/4k/DSC09666_PSMS.jpg");
}
#img22 {
  grid-area: img22;
  background-image: url("/assets/photos/4k/DSC09774_PSMS.jpg");
}
#img23 {
  grid-area: img23;
  background-image: url("/assets/photos/4k/DSC09694_PSMS.jpg");
}
#img24 {
  grid-area: img24;
  background-image: url("/assets/photos/4k/DSC09678_PSMS.jpg");
  background-position: left;
}
#img25 {
  grid-area: img25;
  background-image: url("/assets/photos/4k/DSC09998.jpg");
}
#img26 {
  grid-area: img26;
  background-image: url("/assets/photos/4k/DSC09766_PSMS.jpg");
}
#img27 {
  grid-area: img27;
  background-image: url("/assets/photos/4k/DSC09986.jpg");
}
#section-nos-bouteilles {
  grid-template-areas:
    "nos-bouteilles nos-bouteilles nos-bouteilles nos-bouteilles nos-bouteilles img24"
    "nos-bouteilles nos-bouteilles nos-bouteilles nos-bouteilles nos-bouteilles img25";
}
#section-drinks {
  grid-template-areas:
    "img14 soft-drinks soft-drinks soft-drinks soft-drinks soft-drinks"
    "img15 soft-drinks soft-drinks soft-drinks soft-drinks soft-drinks";
}
#section-digestif {
  grid-template-areas:
    "digestif-drinks digestif-drinks digestif-drinks digestif-drinks digestif-drinks img22"
    "digestif-drinks digestif-drinks digestif-drinks digestif-drinks digestif-drinks img23";
}
#section-whiskey {
  grid-template-areas:
    "img20 strong-drinks strong-drinks strong-drinks strong-drinks strong-drinks"
    "img21 strong-drinks strong-drinks strong-drinks strong-drinks strong-drinks";
}

/* ----- MEDIA QUERIES ----- */

@media (max-device-width: 1356px) {
  .coppers-box h1,
  .coppers-box h2 {
    font-size: 45px;
  }
}
@media (max-device-width: 1100px) {
  .section {
    grid-template-columns: repeat(3, 1fr);
  }

  /* TODO: decide rows template 50/50 or 2/3 and 1/3, its mixed at the moment */
  #section-nos-bouteilles {
    grid-template-areas:
      "nos-bouteilles nos-bouteilles img24"
      "nos-bouteilles nos-bouteilles img25"
      "nos-bouteilles nos-bouteilles img25";
  }
  #section-drinks {
    grid-template-areas:
      "img14 soft-drinks soft-drinks "
      "img15 soft-drinks soft-drinks "
      "img15 soft-drinks soft-drinks ";
  }
  #section-digestif {
    grid-template-areas:
      "digestif-drinks digestif-drinks img22"
      "digestif-drinks digestif-drinks img23";
  }
  #section-whiskey {
    grid-template-areas:
      "img20 strong-drinks strong-drinks"
      "img21 strong-drinks strong-drinks";
  }
}
@media (max-device-width: 610px) {
  .section {
    grid-template-columns: repeat(2, 1fr);
  }
  #section-nos-bouteilles {
    grid-template-areas:
      "img24 img24"
      "nos-bouteilles nos-bouteilles"
      "nos-bouteilles nos-bouteilles";
  }
  #section-drinks {
    grid-template-areas:
      " img14 img14"
      " soft-drinks soft-drinks"
      " soft-drinks soft-drinks";
  }
  #section-digestif {
    grid-template-areas:
      " img22 img22"
      " digestif-drinks digestif-drinks"
      " digestif-drinks digestif-drinks";
  }
  #section-whiskey {
    grid-template-areas:
      "img20 img20"
      "strong-drinks strong-drinks"
      "strong-drinks strong-drinks"
      "img21 img21";
  }
  /* #img15,
  #img23,
  #img25 {
    display: none;
  } */

  #img21{
    display: block;
  }
}
