.project-cover {
  --width: 100%;
  --position: fixed;
  --border-radius: 0vw;
  --top: var(--header-height);
}
@media (min-width: 720px) {
  .project-cover {
    --width: 100%;
  }
}
@media (min-width: 720px) {
  .project-cover {
    --position: relative;
  }
}
@media (min-width: 720px) {
  .project-cover {
    --border-radius: 0vw;
  }
}
@media (min-width: 720px) {
  .project-cover {
    --top: auto;
  }
}
@media (min-width: 1281px) {
  .project-cover {
    --width: 85vw;
  }
}
@media (min-width: 1281px) {
  .project-cover {
    --position: relative;
  }
}
@media (min-width: 1281px) {
  .project-cover {
    --border-radius: 0.4166666667vw;
  }
}
@media (min-width: 1281px) {
  .project-cover {
    --top: auto;
  }
}
@media (min-width: 2400px) {
  .project-cover {
    --width: 2040px;
  }
}
@media (min-width: 2400px) {
  .project-cover {
    --position: relative;
  }
}
@media (min-width: 2400px) {
  .project-cover {
    --border-radius: 10px;
  }
}
@media (min-width: 2400px) {
  .project-cover {
    --top: auto;
  }
}
.project-cover {
  width: var(--width);
  position: var(--position);
  top: var(--top);
  overflow: hidden;
  border-radius: var(--border-radius);
}
.project-cover::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.6);
  animation: project-cover-fade-in var(--animation-duration) var(--animation-timing-function) var(--animation-delay) 1 normal both;
}
.project-cover__content {
  --padding-left: var(--main-layout-side-padding);
  --padding-right: var(--main-layout-side-padding);
}
@media (min-width: 720px) {
  .project-cover__content {
    --padding-left: var(--main-layout-side-padding);
  }
}
@media (min-width: 720px) {
  .project-cover__content {
    --padding-right: var(--main-layout-side-padding);
  }
}
@media (min-width: 1281px) {
  .project-cover__content {
    --padding-left: 7.1875vw;
  }
}
@media (min-width: 1281px) {
  .project-cover__content {
    --padding-right: 38.6458333333vw;
  }
}
@media (min-width: 2400px) {
  .project-cover__content {
    --padding-left: 172.5px;
  }
}
@media (min-width: 2400px) {
  .project-cover__content {
    --padding-right: 927.5px;
  }
}
.project-cover__content {
  position: absolute;
  left: 0;
  width: 100%;
  padding: 0 var(--padding-right) 0 var(--padding-left);
  z-index: 2;
  animation: project-cover-content-translate-top var(--animation-duration) var(--animation-timing-function) var(--animation-delay) 1 normal both;
}

@keyframes project-cover-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes project-cover-content-translate-top {
  from {
    top: 100%;
  }
  to {
    top: 0;
  }
}
@keyframes project-content-inner-margin-top {
  from {
    transform: translateY(calc((var(--first-line-height) + var(--gap) + var(--padding-top)) * -1));
  }
  to {
    transform: translateY(0);
  }
}