@charset "utf-8";
/* prefixed 180822 */

.grid-wedDetail {
   display: grid;
   grid-template-areas:
      "head head head head"
      "box1 box1 box1 box1"
      "box2 box2 pic1 pic1"
      "pic2 pic2 pic3 pic4"
      "box3 box3 box3 box3"
      "extH extH extH extH"
      "ext1 ext1 ext2 ext2";
   grid-template-rows: auto;
   grid-template-columns: repeat(4, 1fr);
   -moz-column-gap: 2%;
   column-gap: 2%;
   row-gap: 1rem;
   margin: 0 1%;
}

#heading {
   grid-area: head;
   text-align: center;
}
#box1intro {
   grid-area: box1;
   margin: 0 0 1rem 0;
}

#box2mainText {
   grid-area: box2;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

#leadPic {
   grid-area: pic1;
}
#halfPic {
   grid-area: pic2;
}
#quartPic1 {
   grid-area: pic3;
}
#quartPic2 {
   grid-area: pic4;
}

#fwContent {
   grid-area: box3;
   margin: 12px;
}

#extraInfo-heading {
   grid-area: extH;
}

#vidBox {
   grid-area: ext1;
   border: 1px solid #808080;
   border-radius: 0 0 16px 16px;
   -o-object-fit: cover;
   object-fit: cover;
}

#usefulInfo {
   grid-area: ext2;
}

@media only screen and (max-width: 900px) {
   .grid-wedDetail {
      grid-template-areas:
         "head head head head"
         "box1 box1 box1 box1"
         "pic1 pic1 pic1 pic1"
         "box2 box2 box2 box2"
         "pic2 pic2 pic3 pic4"
         "box3 box3 box3 box3"
         "extH extH extH extH"
         "ext1 ext1 ext2 ext2";
   }

   #box1intro {
      text-align: center;
   }
}

@media only screen and (max-width: 600px) {
   .grid-wedDetail {
      display: grid;
      grid-template-areas:
         "head head"
         "box1 box1"
         "pic1 pic1"
         "box2 box2"
         "pic2 pic2"
         "pic3 pic4"
         "box3 box3"
         "extH extH"
         "ext1 ext1"
         "ext2 ext2";
      grid-template-rows: auto;
      grid-template-columns: 1fr 1fr;
      -moz-column-gap: 10px;
      column-gap: 10px;
      row-gap: 4px;
      margin: 0;
   }

   #box1intro {
      text-align: center;
   }
   #box2mainText {
      padding: 0 12px;
   }
}