/* 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); */
}
/* grid area */
#contact-form {
  grid-area: contact-form;
  display: grid;
}
#contacts-dark {
  grid-area: contacts-dark;
}
#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/reservation/compresed/DSC_7771.jpg");
}

#img2 {
  grid-area: img2;
  background-image: url("/assets/photos2/reservation/compresed/DSC_7759.jpg");
}

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

#img4 {
  grid-area: img4;
  background-image: url("/assets/photos2/reservation/compresed/DSC_9602.jpg");
}

#img5 {
  grid-area: img5;
  background-image: url("/assets/photos/4k/compressed/DSC09983.jpg");
}
#box7 {
  grid-area: box7;
}
#box8 {
  grid-area: box8;
}
#box9 {
  grid-area: box9;
}

#img6 {
  grid-area: img6;
  background-image: url("/assets/photos2/reservation/compresed/DSC_1127.jpg");
}

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

#img8 {
  grid-area: img8;
  background-image: url("/assets/photos/4k/DSC09662_PSMS.jpg");
}
#img9 {
  grid-area: img9;
  background-image: url("/assets/photos/4k/DSC09990.jpg");
}
#img10 {
  grid-area: img10;
  background-image: url("/assets/photos/4k/DSC09970.jpg");
}

/* 1 row = 33vh */
#section1 {
  grid-template-areas:
    "contact-form contact-form contact-form img1 box3 box3"
    "contact-form contact-form contact-form img2 img2 img3"
    "contact-form contact-form contact-form img2 img2 img3";
}

/* 1 row = 66vh */
#section2 {
  grid-template-areas: "box4 img4 img4 contacts-dark contacts-dark contacts-dark";
}

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

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

.contacts-box {
  background-color: #49494b;
  color: white;
  padding: 60px 30px;
  /* text-align: center; */
  min-height: 33vh;
}
.contacts-box h3 {
  color: #fff;
  font-size: 58px;
  font-family: "Bebas Neue";
  padding-bottom: 15px;
}
.box {
  color: white;
  display: grid;
  justify-content: inherit;
  align-content: inherit;
  padding: 25px;
  text-align: center;
  min-height: 33vh;
}
.box-block h2 {
  padding-top: 50px;
}
.box-block h5,
h3 {
  text-align: left;
}
.contacts-box h4 {
  font-family: "Bebas Neue";
  font-size: 42px;
  color: #fff;
}
.link {
  font-family: "Bebas Neue";
  font-size: 20px;
  color: #fff;
}
.contacts-box hr {
  width: 100%;
  border-top: 1px solid white;
  margin: 0;
}
.contact-info {
  height: 100%;
  display: grid;
  align-content: center;
  padding-bottom: 25px;
}
.form-grid {
  display: grid;
  grid-template-columns: auto;
  gap: 20px;
  padding: 30px 0;
}
.form-group {
  display: grid;
  margin: 0;
}
.span-2 {
  /* grid-area: 4 / 1 / span 1 / span 2; */
  grid-column: span 2;
  -ms-grid-column: span 2;
}
.form-group label {
  margin: 0;
  font-size: 24px;
  font-family: "Bebas Neue", cursive;
}
.input {
  border: none;
  height: 50px;
  padding: 0 15px;
}
.textarea {
  border: none;
  padding: 15px;
}
.buttons-block {
  /* padding-top: 20px; */
  display: grid;
  justify-items: flex-start;
  gap: 20px;
  margin-bottom: 35px;
}
.opening-hours {
  padding: 50px 0;
  justify-content: center;
}
/* old button */
.button {
  background-color: #8d4d44;
  border: none;
  width: 140px;
  height: 65px;
  padding: 20px 30px;
}
.button-text {
  font-family: "Courgette";
  font-size: 24px;
  color: #fff;
  margin: 0;
  margin-block-start: 0;
  margin-block-end: 0;
}
/* new button */
.jbtn-send {
  font-family: "Courgette", cursive;
  font-size: 24px;
  padding: 15px 30px;
  color: #fff;
  border-radius: 5px;
  border: none;
  /* background-color: #bc8b7c;
  border: 1px solid #bc8b7c; */
  background-color: #8d4d44;
  border: 1px solid #8d4d44;
  margin-right: 30px;
  transition-duration: 0.3s;
  align-self: flex-start;
}

.jbtn-send:hover {
  /* box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); */
  scale: 1.05;
  background-color: #8d4d44;
  border: 1px solid #8d4d44;
}

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

@media (max-device-width: 1410px) {
  .coppers-box .contact-info h3 {
    font-size: 40px;
  }
}

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

@media (max-device-width: 1284px) {
  .coppers-box .contact-info h3 {
    font-size: 30px;
  }
}

@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;
  }
  .span-2 {
    grid-area: inherit;
  }
  .contacts-box h3 {
    font-size: 30px;
  }
  .contacts-box h4 {
    font-size: 22px;
  }
  .section {
    grid-template-columns: repeat(3, 1fr);
  }
  #section1 {
    grid-template-areas:
      "img1 box3 box3 "
      "img2 img2 img3"
      "img2 img2 img3"
      "contact-form contact-form contact-form"
      "contact-form contact-form contact-form"
      "contact-form contact-form contact-form";
  }

  #section2 {
    grid-template-areas:
      "box4 img4 img4"
      "box4 img4 img4"
      "contacts-dark contacts-dark contacts-dark";
  }

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

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

@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:
      "img1 img1"
      "box3 box3"
      "img2 img2"
      "contact-form contact-form"
      "contact-form contact-form"
      "contact-form contact-form"
      "img3 img3";
  }

  #section2 {
    grid-template-areas:
      "box4 box4"
      "img4 img4"
      "contacts-dark contacts-dark";
  }
  #section3 {
    grid-template-areas:
      "img4 img4"
      "img5 img5";
  }

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

@media (max-device-width: 395px) {
  .contacts-box {
    padding: 60px 15px;
  }
}

@media (max-device-width: 360px) {
  .contacts-box {
    padding: 60px 10px;
  }
  .opening-hours {
    grid-template-columns: 1fr;
  }
  .opening-hours h6 {
    text-align: center;
    margin-left: 0 !important;
  }
  .ml-3 {
    margin-bottom: 10px !important;
  }
}

@media (max-device-width: 331px) {
  .coppers-box .contact-info h3 {
    font-size: 25px;
  }
}