.wrapper {
  display: grid;
  background-color: #e7e8e3;
  gap: 15px;
}

/* ----------------------- showcase ----------------------- */
.showcase {
  /* min-height: 100vh; */
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 15px;
}

.showcase-main {
  grid-area: 1/1 / span 1 / span 5;
  background-image: url("/assets/photos2/home/compressed/DSC_0356.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 66vh;
}

.showcase-main.b {
  background-image: url("/assets/photos2/home/compressed/DSC_5632.jpg");
}

.showcase-side {
  display: grid;
  /* grid-template-rows: repeat(3, 1fr); */
  gap: 15px;
}

/* showcase */
.carousel-indicators li {
  width: 15px;
  height: 15px;
  border-radius: 50%;
}

.carousel-control-next,
.carousel-control-prev {
  width: 5%;
}

.carousel-control-next-icon {
  width: 50px;
  height: 50px;
}

.carousel-control-prev-icon {
  width: 50px;
  height: 50px;
}

/* ----------------------- boxes ----------------------- */
.coppers-box {
  background-color: #49494b;
  color: white;
  display: grid;
  justify-content: center;
  align-content: center;
  padding: 25px;
  text-align: center;
  min-height: 33vh;
}
.coppers-box.padding-sm {
  padding: 15px;
}
.coppers-box.go:hover {
  color: white;
  transform: scale(1.05);
}

.coppers-box.go:hover h2,
.coppers-box.go:hover h5,
.coppers-box.go:hover hr {
}

/* ----------------------- boxes text ----------------------- */
.coppers-box h1,
.coppers-box h2 {
  font-family: "Bebas Neue", cursive;
  font-size: 55px;
}

.coppers-box h3 {
  font-family: "Bebas Neue", cursive;
  /* font-size: 37px; */
  font-size: 45px;
  margin: 0;
  text-align: left;
}
.coppers-box h5 {
  font-family: "Courgette", cursive;
  font-size: 1rem;
  text-align: left;
}

.coppers-box h6 {
  font-family: "Bebas Neue", cursive;
  font-size: 20px;
  margin: 0;
  text-align: left;
}

.coppers-box p {
  font-family: "Courgette", cursive;
  font-size: 1rem;
  text-align: left;
}

.coppers-box a {
  color: white;
}

.coppers-box a:hover {
  color: #e7e8e3;
  text-decoration: none;
}

.coppers-box hr {
  width: 100%;
  border-top: 1px solid white;
  margin: 0;
}

/* boxes colors */
.box-dark {
  background-color: #49494b;
}
.box-main {
  background-color: #bc8b7c;
}
.box-light {
  background-color: #97baa6;
}
.box-text {
  background-color: white;
  color: #49494b;
}
.box-text hr {
  border-top: 1px solid #49494b;
}
.box-img {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.box-img-66 {
  min-height: 66vh;
}

/* ----------------------- sections ----------------------- */
.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); */
}

.section {
  /* min-height: 100vh; */
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  /* grid-template-rows: repeat(3, 1fr); */
  grid-template-rows: auto;
  gap: 15px;
}

/* ----------------------- grid area ----------------------- */
#carousel {
  grid-area: carousel;
  background-image: url("/assets/photos/4k/DSC09653.jpg");
}
#box1 {
  grid-area: box1;
}
#box2 {
  grid-area: box2;
}
#box3 {
  grid-area: box3;
}
#box4 {
  grid-area: box4;
}
#box5 {
  grid-area: box5;
}
#box6 {
  grid-area: box6;
}
#img1 {
  grid-area: img1;
  background-image: url("/assets/photos2/home/compressed/DSC_8003.jpg");
}

#img2 {
  grid-area: img2;
  background-image: url("/assets/photos/4k/DSC09830_PSMS.jpg");
}

#img3 {
  grid-area: img3;
  background-image: url("/assets/photos2/home/compressed/DSC_8169.jpg");
}

#img4 {
  grid-area: img4;
  background-image: url("/assets/photos2/home/compressed/DSC_8668.jpg");
}

#img5 {
  grid-area: img5;
  background-image: url("/assets/photos2/home/compressed/DSC_0236.jpg");
}
#box7 {
  grid-area: box7;
}
#box8 {
  grid-area: box8;
}
#box9 {
  grid-area: box9;
}

#img6 {
  grid-area: img6;
  background-image: url("/assets/photos2/home/compressed/DSC_8110.jpg");
}

#img7 {
  grid-area: img7;
  background-image: url("/assets/photos2/home/compressed/DSC_9013.jpg");
  /* background-position: right; */
}

#img8 {
  grid-area: img8;
  background-image: url("/assets/photos/4k/DSC09651.jpg");
}

/* 1 row = 33vh */
#section1 {
  grid-template-areas:
    "carousel carousel carousel box3 box4 box4"
    "carousel carousel carousel img1 img1 box5"
    "box1 box2 box2 img1 img1 box6";
}

/* 1 row = 66vh */
#section2 {
  grid-template-areas:
    /* "img2 img2 img2 img3 img3 img3" */ "img2 img2 img2 img3 img3 img3";
}

/* 1 row = 66vh */
#section3 {
  grid-template-areas:
    /* "img4 img4 img4 img5 img5 img5" */ "img4 img4 img4 img5 img5 img5";
}

/* 1 row = 33vh */
#section4 {
  grid-template-areas:
    "box7 box7 img7 box9 img8 img8"
    "box8 img6 img7 box9 img8 img8";
}

.opening-hours {
  display: grid;
  grid-template-columns: auto auto;
}

/* ----------------------- section coppers week ----------------------- */
#section-week {
  /* min-height: 100vh; */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  gap: 15px;
}
#img-week {
  background-image: url("/assets/photos2/home/compressed/DSC_8740.jpg");
}

#coppers-week-logo {
  height: 70px;
  width: auto;
  justify-self: center;
}
#section-week h6,
#section-week p {
  text-align: center;
  margin: 0;
}
#section-week h4 {
  font-family: "Courgette", cursive;
  font-size: 1.5rem;
}

.grid-week {
  display: grid;
  grid-template-columns: 1fr auto 1fr;

  justify-content: center;
}

.grid-week .v-line {
  width: 1px;
  height: auto;
  background-color: white;
  margin: 0 15px;
}
.grid-week .v-line.v-line-p {
  height: 30px;
}
.grid-week .week-day {
  text-align: right;
}
.grid-week .grid-week-box {
  margin-top: 30px;
  margin-bottom: 30px;
}
.content-left h4 {
  text-align: left;
}
.content-right h4 {
  text-align: right;
}

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

@media (max-device-width: 1356px) {
  .coppers-box h1,
  .coppers-box h2 {
    font-size: 45px;
  }
}

@media (max-device-width: 1100px) {
  .showcase {
    grid-template-columns: repeat(1, 1fr);
  }

  #yo {
    offset-position: unset;
  }

  .showcase-side {
    grid-template-rows: repeat(1, 1fr);
    grid-template-columns: repeat(3, 1fr);
  }

  .showcase-main {
    grid-area: auto;
  }

  .section {
    grid-template-columns: repeat(3, 1fr);
  }
  #section1 {
    grid-template-areas:
      "carousel carousel carousel"
      "carousel carousel carousel"
      "box1 box2 box2 "
      "box3 box4 box4"
      "img1 img1 box5"
      "img1 img1 box6";
  }

  #section2 {
    grid-template-areas:
      "img2 img2 img2"
      /* "img2 img2 img2"
      "img3 img3 img3" */
      "img3 img3 img3";
  }

  #section3 {
    grid-template-areas:
      "img4 img4 img4"
      /* "img4 img4 img4"
      "img5 img5 img5" */
      "img5 img5 img5";
  }

  #section4 {
    grid-template-areas:
      "box7 box7 img7"
      "box8 img6 img7"
      "box9 img8 img8"
      "box9 img8 img8";
  }
}
@media (max-device-width: 951px) {
  #section-week {
    grid-template-columns: repeat(1, 1fr);
  }
  #img-week {
    grid-area: 1/1;
    background-image: url("/assets/photos/4k/DSC09653.jpg");
  }

  /* TODO in grid area */
  #carousel {
    background-image: url("/assets/photos2/home/compressed/DSC_8740.jpg");
  }
}
@media (max-device-width: 576px) {
  .showcase-side {
    grid-template-columns: repeat(1, 1fr);
  }

  /* .box-img-66-mobile{
    min-height: 66vh;
  } */

  .section {
    grid-template-columns: repeat(2, 1fr);
  }
  #section1 {
    grid-template-areas:
      "carousel carousel"
      "carousel carousel"
      "box1 box1"
      "box2 box2"
      "box3 box3"
      "box4 box4"
      "img1 img1"
      "img1 img1"
      "box5 box6";
  }

  #section2 {
    grid-template-areas:
      "img2 img2"
      "img3 img3";
  }

  #section3 {
    grid-template-areas:
      "img4 img4"
      "img5 img5";
  }

  #section4 {
    grid-template-areas:
      "box7 box7"
      "box8 img6"
      "img7 img7"
      "img7 img7"
      "box9 img8"
      "box9 img8";
  }
}