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


.home-random {

  scroll-snap-align: start;
  height: 100dvh;

  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: 100dvh;
    overflow: hidden;


    & 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);
    text-shadow: .05rem .05rem .05rem rgb(255, 255, 255);

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

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

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

    }


  }
}

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


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

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

    & img {
      grid-column: 1 / -1;


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

  }

}

.header-home {
  grid-column: 2 / -2;
  grid-row: 1;

  z-index: 2;
  display: grid;
  grid-template-columns: subgrid;
  padding-top: 1lh;
  height: calc(100dvh - 1lh);
  align-items: start;
  text-shadow: .05rem .05rem .05rem rgb(255, 255, 255);

  pointer-events: none;

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

h1 {
  grid-row: 1;
  padding-top: var(--py);
  grid-column: 2 / span 2;

  & .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;
  }
}

#icon-x {
  grid-column: 7 / -4;
  grid-row: 1;

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

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

}