/*splashTemplate */

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

.splashTemplate {
  display: grid;
  width: 100vw;
  height: 80svh;

  overflow: hidden;

  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto 50svh 4fr auto;
  grid-template-areas: "image image";
}

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

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

    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto calc(var(--lineHeight) * 2) 60svh 3fr 1fr 1f;
    grid-template-areas:
      "image image image image"
      "image image image image";
  }
}

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

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

    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto calc(var(--lineHeight) * 3) auto 1fr;
    grid-template-areas:
      "image image image image"
      "image image image image";
  }
}

.typeLayer {
  /* background-color: hsla(271, 100%, 32%, 0.851); */
  position: fixed;
  display: flex;
  width: 100%;
  height: 100%;
  z-index: 2;
  color: white;
}


.splashImage {
  grid-area: image;
  background-color: blueviolet;
}

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