/* The two original portrait boards remain complete inside a fitted landscape cover. */
.work[data-project-id="tag-interaction"] { --work-paper: #bfc0bb; }
.work[data-project-id="product-01"] { --work-paper: #fff; }

.work[data-project-id="tag-interaction"],
.work[data-project-id="product-01"] {
  background: var(--work-paper);
  color: #191b18;
}

.work[data-project-id="tag-interaction"] .work-cover-layout,
.work[data-project-id="product-01"] .work-cover-layout {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--work-paper);
  pointer-events: none;
}

.work[data-project-id="tag-interaction"] .work-cover-layout .work-cover,
.work[data-project-id="product-01"] .work-cover-layout .work-cover {
  position: absolute;
  inset: 0 0 0 auto;
  width: 55%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
  background: transparent;
  transform: none;
  filter: none;
}

.work[data-project-id="tag-interaction"] .work-cover-copy,
.work[data-project-id="product-01"] .work-cover-copy {
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: clamp(10px, 1vw, 18px);
  width: 47%;
  padding: clamp(22px, 2.4vw, 48px);
  color: #191b18;
}

.work[data-project-id="tag-interaction"] .work-cover-copy h4,
.work[data-project-id="product-01"] .work-cover-copy h4 {
  margin: 0;
  font-family: var(--inter);
  font-size: clamp(22px, 2.35vw, 56px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.035em;
  text-transform: none;
  overflow-wrap: normal;
  word-break: keep-all;
}

.work[data-project-id="tag-interaction"] .work-cover-kicker,
.work[data-project-id="product-01"] .work-cover-kicker {
  display: block;
  font-family: var(--inter);
  font-size: clamp(10px, .8vw, 14px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .04em;
  color: #50544c;
}

.work[data-project-id="tag-interaction"] .work-info,
.work[data-project-id="product-01"] .work-info {
  display: none;
}

.work[data-project-id="tag-interaction"] .idx,
.work[data-project-id="product-01"] .idx {
  color: #252922;
  background: rgba(255, 255, 255, .5);
  border: 1px solid rgba(25, 27, 24, .15);
  backdrop-filter: none;
}

@media (max-width: 820px) {
  .work[data-project-id="tag-interaction"] .work-cover-copy h4,
  .work[data-project-id="product-01"] .work-cover-copy h4 {
    font-size: clamp(22px, 4.4vw, 36px);
  }
}

@media (max-width: 480px) {
  .work[data-project-id="tag-interaction"] .work-cover-copy,
  .work[data-project-id="product-01"] .work-cover-copy {
    width: 46%;
    padding: 20px 14px 24px 22px;
    gap: 9px;
  }

  .work[data-project-id="tag-interaction"] .work-cover-copy h4,
  .work[data-project-id="product-01"] .work-cover-copy h4 {
    font-size: clamp(19px, 5.4vw, 24px);
    line-height: 1.35;
  }

  .work[data-project-id="tag-interaction"] .work-cover-kicker,
  .work[data-project-id="product-01"] .work-cover-kicker {
    font-size: 10px;
    letter-spacing: 0;
  }
}