@import "../../styles/helper";

#article {
  position: fixed;
  width: 100%;
  height: 100%;

  #article-bg-mask,
  #article-info,
  #article-tracks {
    @include transition;
    transition-delay: 400ms;
  }

  #article-bg,
  #article-bg-mask {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  #article-bg {
    background-size: cover;
    background-position: center;
    z-index: 1;
  }

  #article-bg-mask {
    background-image: linear-gradient(
      -90deg,
      rgba(0, 0, 0, 0.2) 0%,
      rgba(0, 0, 0, 0.8) 100%
    );
    z-index: 2;
    opacity: 0.8;
  }

  #article-info,
  #article-tracks {
    position: absolute;
    z-index: 3;
    top: 136px;
    overflow-y: auto;
    //transform: translateY(260px);
    //opacity: 0;
  }

  #article-info {
    width: 50%;
    padding-left: 60px;
    height: calc(100% - 246px);

    #article-info-meta {
      font-size: 1.5em;
      letter-spacing: 0.05em;
      margin-bottom: 60px;
      margin-top: 10px;
    }

    #article-info-title {
      font-size: 2em;
      letter-spacing: 0.05em;
      .icon {
        width: 29px;
        height: 29px;
        position: relative;
        top: 4px;
        margin-right: 8px;
        @include cursor;
        &:first-child {
          margin-left: 42px;
        }
      }
    }

    #article-info-desc,
    #article-info-desc * {
      font-size: 14px !important;
      line-height: 24px !important;
      color: white !important;
      background-color: rgba(0, 0, 0, 0);
    }
    #article-info-desc {
      img,
      iframe {
        max-width: 100%;
      }
      img {
        max-height: 360px;
      }
    }

    #article-info-date {
      font-size: 13px;
      line-height: 22px;
      margin-top: 30px;
      margin-bottom: 50px;
      .icon {
        width: auto;
        height: 22px;
        position: relative;
        top: 6px;
        margin-right: 6px;
      }
    }
  }

  #article-tracks {
    max-height: calc(100% - 146px);
    right: 0;
    width: 35%;
    padding: 36px 60px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 3vw;
    grid-row-gap: 1.5vw;
  }
}
