.home2-project-media,
.works-project-media {
  position: relative;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent!important;
}

.home2-project-card,
.works-project {
  position: relative;
  min-width: 0;
  padding: 9px 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}

.home2-project-card:hover,
.works-project:hover {
  border-color: color-mix(in srgb, var(--brand) 68%, var(--line));
  box-shadow: 0 16px 34px rgba(0, 0, 0, .12);
}

.project-device-preview {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  overflow: visible;
  opacity: 1;
  transform: none;
  background: transparent;
}

.home2-project-media > .project-device-preview,
.works-project-media > .project-device-preview {
  z-index: 1;
  opacity: 1;
  transform: none;
}

.project-desktop-device {
  position: absolute;
  top: 3%;
  bottom: 1%;
  left: 0;
  width: 89%;
  overflow: hidden;
  border: 1px solid #334454;
  border-radius: 11px;
  background: #111923;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .3);
  transition: transform .35s ease, border-color .35s ease;
}

.project-desktop-bar {
  display: none;
}

.project-desktop-bar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff6259;
}

.project-desktop-bar i:nth-child(2) { background: #ffbd2e; }
.project-desktop-bar i:nth-child(3) { background: #28ca42; }

.project-desktop-bar b {
  flex: 1;
  overflow: hidden;
  margin-left: 6px;
  color: #9ab1bf;
  font-size: 8px;
  font-weight: 500;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-desktop-screen,
.project-mobile-screen {
  display: block;
  height: 100%;
  overflow: hidden;
}

.project-desktop-screen img,
.project-mobile-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.project-mobile-device {
  position: absolute;
  z-index: 2;
  right: .5%;
  bottom: -2%;
  width: 19%;
  height: auto;
  aspect-ratio: 390 / 844;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  box-shadow: -10px 16px 34px rgba(0, 0, 0, .52);
  transition: transform .35s ease;
}

.project-mobile-speaker {
  display: none;
}

.project-mobile-screen {
  height: 100%;
  border-radius: 7px;
  background: #fff;
}

.home2-project-media:hover .project-desktop-device,
.home2-project-media:focus-visible .project-desktop-device,
.works-project:hover .project-desktop-device {
  border-color: #00aeef;
  transform: translateX(-1.5%);
}

.home2-project-media:hover .project-mobile-device,
.home2-project-media:focus-visible .project-mobile-device,
.works-project:hover .project-mobile-device {
  transform: translateY(-3px) scale(1.015);
}

.home2-project-media > span:not(.project-device-preview) {
  display: none;
}

.home2-project-media::after{display:none}

.project-card-caption{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:6px 14px;
  min-height:62px;
  padding:12px 4px 8px;
}

.project-card-caption h3,
.project-card-caption h4{
  min-width:0;
  margin:0;
  font-size:18px;
  line-height:1.2;
  overflow-wrap:anywhere;
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

.project-card-caption>a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:44px;
  color:var(--link);
  font-size:12px;
  font-weight:750;
  text-decoration:none;
  white-space:nowrap;
}

.project-card-caption>a:hover{text-decoration:underline;text-underline-offset:4px}

@media (max-width: 639px) {
  .project-desktop-device { width: 88%; }
  .project-mobile-device { width: 18.5%; }
  .home2-project-card,.works-project{padding:7px 8px 10px}
  .project-card-caption{padding:11px 2px 7px}
  .project-card-caption h3,.project-card-caption h4{font-size:18px}
}

@media (prefers-reduced-motion: reduce) {
  .project-desktop-device,
  .project-mobile-device {
    transition: none;
  }
}