/* ******************************** */
/* ********* Define layout ******** */
/* ******************************** */

/*pageTemplate */

/* ******************************** */
/* ********* MOBILE Style ********* */
/* ******************************** */

.pageTemplate {
  display: grid;
  width: 100%;
  min-height: 100vh;

  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto 85svh 4fr auto;
  grid-template-areas:
    "menu menu"
    "header header"
    "image image"
    "info info"
    "footer footer";
}

/* ******************************** */
/* ******** TABLET style ********** */
/* ******************************** */

@media screen and (min-width: 480px) {
  .pageTemplate {
    display: grid;
    width: 100%;
    min-height: 100vh;

    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto calc(var(--lineHeight) * 2) 60svh 3fr 1fr 1f;
    grid-template-areas:
      "header header header header"
      "menu menu menu menu"
      "image image info info"
      "image image info info"
      "image image footer footer ";
  }
}

/* ******************************** */
/* ********* DESKTOP style ******** */
/* ******************************** */

@media screen and (min-width: 960px) {
  .pageTemplate {
    display: grid;
    width: 100%;
    min-height: 100vh;

    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto calc(var(--lineHeight) * 3) auto 1fr;
    grid-template-areas:
      "image image header header"
      "image image menu menu"
      "image image info info"
      "image image footer footer ";
  }
}





/* ******************************** */
/* ********* Define Areas ******** */
/* ******************************** */

.header {
  grid-area: header;
  padding: calc(var(--gutter-width) * 2);
  padding-bottom: 5rem;
  background-color: #fff;
  z-index: 1;
}

@media only screen and (max-width: 480px) {
  .header {
    padding-top: 6rem;
  }
}

.header h2 {
  text-align: right;
  text-transform: none;
}

@media only screen and (max-width: 480px) {
  .header h2 {
    text-align: left;
  }
}

.coverImage {
    grid-area: image;
    width: auto;
    height: 100vh;
    top: 0;
    left: 0;
    position: sticky;
    opacity: 1;
}

.coverImage img {
  /* position: sticky; */
  top: 0px;
  width: 100%;
  min-height: 100svh;
  object-fit: cover;
  overflow: hidden;
}


@media only screen and (max-width: 480px) {
  .coverImage img {
    translate: 0 -22.5%;
  }

  .coverImage {
    overflow: hidden;
    height: 100svh;
  }
}

.inlineImage {
  display: inline-block;
  width: 100%;
  aspect-ratio: 2.5;
  object-fit: cover;
  margin-top: calc(var(--lineHeight) * 2);
  margin-bottom: calc(var(--lineHeight) * 2);
}

.info {
  grid-area: info;
  padding: calc(var(--gutter-width) * 2);
  background-color: rgb(255, 255, 255);
  z-index: 1;

  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  

}

@media only screen and (max-width: 960px) {
  .info {
    padding: calc(var(--gutter-width) / 2);
  }
}

.footer {
  grid-area: footer;
  padding: calc(var(--gutter-width) * 2);

  padding-bottom: calc(var(--lineHeight) * 5);

  background-color: rgb(255, 255, 255);
  border-top: 1px solid rgb(196, 196, 196);
  z-index: 1;
  bottom: 0px;
}

@media only screen and (max-width: 960px) {
  .footer {
    padding: calc(var(--gutter-width) / 2);
  }
}