.portfolio-scroller {
  position: relative;
}

.portfolio-wrapper {
  margin: 0;
  padding: 0;
}

.portfolio-item {
  position: relative;
  height: 100vh;
}

.portfolio-link {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
}



.portfolio-bg {
  position: absolute;
  inset: 0;
  background: var(--background);
  overflow: hidden;
}



.portfolio-item_content {
  position: relative;
  height: 100%;
}

.portfolio-item_grid {
  position: relative;
  height: 100%;
  align-items: center;
}

.portfolio-item_title-wrapper.is-title {
  grid-column: 1 / 2;
}

.portfolio-item_title-wrapper.is-type {
  grid-column: 4 / 5;
  text-align: right;
}


.portfolio-item_summary {
  max-width: 32ch;
  margin-inline-start: auto;
  text-wrap: pretty;
}

@media (max-width: 767px) {
  .portfolio-item_summary {
    max-width: none;
    margin-inline-start: 0;
  }
}

.portfolio-item_video-wrapper {
  grid-column: 2 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 767px) {
  .portfolio-item_grid {
    grid-template-columns: 1fr;
    row-gap: 1.5em;
    padding-block: 2em;
  }

  .portfolio-item_title-wrapper.is-title,
  .portfolio-item_title-wrapper.is-type,
  .portfolio-item_video-wrapper {
    grid-column: 1 / -1;
  }

  .portfolio-item_title-wrapper.is-type {
    text-align: center;
  }

  .portfolio-item_title-wrapper.is-title {
    text-align: center;
    order: 1;
  }

  .portfolio-item_video-wrapper {
    order: 2;
  }

  .portfolio-item_title-wrapper.is-type {
    order: 3;
  }
}



.video-frame {
  position: relative;
  width: 100%;

  max-width: 56.267em;
  aspect-ratio: 673 / 389;

  color: var(--color-white-grey);
  transition: color var(--duration-hover-slow) var(--ease-hover);
}

.video-frame.is-portrait {

  max-width: 32.517em;
  aspect-ratio: 389 / 519;
}

.video-frame.is-standard {

  max-width: 43.384em;
  aspect-ratio: 519 / 389;
}

.video-frame.is-poster {

  width: 387px;
  max-width: 100%;
  aspect-ratio: 387 / 516;
}

.video-frame.is-poster .video-frame_media {

  object-fit: contain;
}

.video-frame_media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.video-frame.is-native {
  aspect-ratio: var(--media-ratio, 16 / 9);
  height: auto;
}


.video-frame.is-native-portrait {
  max-width: 387px;
}


.video-frame.is-native .video-frame_media {
  object-fit: contain;
}

.video-frame .video-frame_corner {
  position: absolute;

}

.portfolio-item_video-wrapper:hover .video-frame {
  color: var(--color-white);
}

.video-frame_corner {
  width: 1.25em;
  height: 1.25em;
}

.video-frame_corner.is-tl { inset-block-start: 0; inset-inline-start: 0; }
.video-frame_corner.is-tr { inset-block-start: 0; inset-inline-end: 0; transform: rotate(90deg); }
.video-frame_corner.is-br { inset-block-end: 0; inset-inline-end: 0; transform: rotate(180deg); }
.video-frame_corner.is-bl { inset-block-end: 0; inset-inline-start: 0; transform: rotate(270deg); }



.video-frame_cta {
  position: absolute;
  top: 1em;
  left: 1em;
  opacity: 0;
  transition: opacity var(--duration-hover) var(--ease-hover);
}

.portfolio-item_video-wrapper:hover .video-frame_cta,
.portfolio-link:focus-visible .video-frame_cta {
  opacity: 1;
}



.mobile-scroll-badge-wrapper.is-portfolio {
  position: absolute;
  inset-block-end: 2.5em;
  inset-inline-start: 50%;
  transform: translateX(-50%);
}

.mobile-scroll-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 0.9em;
  border: var(--border-hairline) solid var(--color-white);
  border-radius: var(--radius-circle);
}

.mobile-scroll-badge img {
  width: 0.75em;
  height: 0.75em;
}