.home{
  font-size: var(--font-size-footer);
}

.work-meta h1,
.work-meta .work-dates{
  font-size: var(--font-size-body);
  margin: 0;
  font-weight: normal;
}

.work-text{
  font-size: var(--font-size-small);
  line-height: 1.2em;
}

.zh .work-text{
  line-height: 1.3em;
}

.next a{
  text-decoration: none;
  font-size: var(--font-size-body);
}

.next{
  position: fixed;
  right: var(--margin-small);
  top: calc(var(--margin-normal) * 2);
  z-index: 99;
}

@media screen and (min-width: 300px) {

  .works.mobile{
    width: 20vw;
    height: 50vh;
    position: fixed;
    top: 0;
    right:var(--margin-small);
    background: transparent;
    z-index: 998;
  }

  .image-columns-rows{
    padding-top: 60vh;
  }

  .text-overlay{
    position: fixed;
    width: 100vw;
    max-height: 100vh;
    z-index: 2;
    top: calc(var(--margin-large) * 2);
  }

  .work-text{
    background: #ffffff;
    overflow-y: auto;
    z-index: -1;
    box-sizing: border-box;
  }

  .text-overlay,
  .work-text{
    padding: 0 var(--margin-large) 0 var(--margin-small);
  }

  .text-overlay:hover + .work-text,
  .work-text:hover {
    z-index: 2;
  }

  .text-overlay:hover .work-text{
    z-index: 999;
  }

  .work-properties{
    margin: var(--margin-small) 0 0;
  }

  .work-dates{
    padding-left: calc((100vw - 2 * var(--margin-small))/8 * 1);
  }
}

@media screen and (min-width: 1024px) {
  .next{
    right: calc(var(--margin-large) + var(--icon-size));
    top: var(--margin-normal);
  }
  .image-columns-rows{
    padding-top: calc(3em + var(--margin-small) + var(--margin-normal));
  }
  .text-overlay{
    top: var(--margin-small);
  }
  .text-overlay,
  .work-text{
    width: 600px;
    padding: 0 var(--margin-normal);
  }
  .image-column{
    font-size: var(--font-size-body);
  }
  .work-text{
    border-right: none;
  }
  .work-properties,
  .work-dates{
    padding-left: calc((100vw - 2 * var(--margin-normal))/16 * 1);
  }
}

@media screen and (min-width: 1400px) {

}

@media screen and (min-width: 1920px) {

}