main {
  display: grid;
  grid-template-columns: subgrid;
  grid-row: 1 / 3;
  row-gap: var(--px);
}

/* the image in the header */
.home-random {

  scroll-snap-align: start;
  /* height: 100svh; */

  /* @media (max-aspect-ratio: 3/4) {
    height: 80svh;
  } */

  grid-row: 1;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;

  & picture {
    grid-row: 1;
    grid-column: 1 / -1;
    display: block;
    width: 100%;
    /* height: 100svh; */
    overflow: hidden;

    /* @media (max-aspect-ratio: 3/4) {
      height: 80svh;
    } */


    & img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      transform: scale(1.07);
      transform-origin: center center;
    }
  }

  & .meta-tag {
    grid-row: 1;
    grid-column: 5 / -5;
    align-self: end;
    z-index: 2;
    padding-bottom: var(--py);
    -webkit-text-stroke: .1em rgb(255, 255, 255);
    paint-order: stroke fill;
    text-shadow: .03rem .03rem .03rem rgb(255, 255, 255);

    &::after {
      content: " (...)";
    }

    @media (width <=1468px) {
      grid-column: 4 / -4;
    }

    @media (width <=768px) {
      grid-column: 3 / -2;

    }


  }

  @media (width <=1068px) {
    aspect-ratio: 3 / 4;
    /* height: 80vh; */
  }
}

/* the actual header element with the logo*/
.header-home {
  grid-column: 2 / -2;
  grid-row: 1;

  z-index: 2;
  display: grid;
  grid-template-columns: subgrid;
  padding-top: var(--px);
  height: 100dvh;
  align-items: start;
  -webkit-text-stroke: .1em rgb(255, 255, 255);
  paint-order: stroke fill;
  text-shadow: .03rem .03rem .03rem rgb(255, 255, 255);

  /* pointer-events: none; */

  & header a,
  & header button {
    pointer-events: auto;
  }

  & .icon-x {
    grid-column: 7 / -4;
    grid-row: 1;
    /* for safari */
    width: 100%;
    max-width: 100%;
    height: auto;

    @media (width <=1468px) {
      grid-column: span 4 / -3;
    }

    @media (width <=1068px) {
      grid-column: span 4 / -1;
    }

  }
}

h1 {
  grid-row: 1;
  padding-top: var(--px);
  grid-column: 2 / span 1;
  white-space: nowrap;

  & .logo-s {
    color: var(--black);
    text-decoration: none;
  }

}

.logo-xl {
  grid-row: 1;
  grid-column: 4 / 7;
  aspect-ratio: 7 / 5;
  color: var(--black);

  @media (width <=1468px) {
    grid-column: 3 / span 4;
  }

  @media (width <=1068px) {
    grid-column: span 4;
    grid-row: 1;
  }

  & div {
    aspect-ratio: 7 / 5;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-bottom: .5lh;
  }

  &:hover {
    text-decoration: none;
  }
}


.blog {
  display: grid;
  grid-template-columns: subgrid;
  grid-row: 2 / 4;


  & .header-main {
    height: initial;
    grid-row: 1;
    padding-top: 1lh;
  }

  & .the-property {
    grid-row: 1 / 3;

    & picture {
      grid-column: 3 / -1;

      &.is-landscape {
        grid-column: 1 / -1;
      }

      @media (width <=568px) {
        grid-column: 4 / -1;
      }
    }

  }

}