/* High Flyfe v51 — test editorial portfolio */

.v51-work{
  background:#f2f0eb;
  color:#111315;
}

.v51-head{
  align-items:end;
}

.v51-intro{
  max-width:650px;
  margin:14px 0 0;
  color:#686965;
  line-height:1.6;
}

.v51-portfolio-grid{
  margin-top:38px;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:30px 24px;
  align-items:start;
}

.v51-card{
  color:inherit;
  text-decoration:none;
  min-width:0;
  display:block;
}

.v51-wide{grid-column:span 8;}
.v51-portrait{grid-column:span 4;}
.v51-half{grid-column:span 6;}
.v51-classic{grid-column:span 7;}
.v51-adidas{grid-column:span 5;}

.v51-media{
  position:relative;
  overflow:hidden;
  background:#17191b;
}

.v51-landscape{aspect-ratio:16/10;}
.v51-vertical{aspect-ratio:9/15;}
.v51-cinematic{aspect-ratio:16/8.9;}

.v51-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .55s cubic-bezier(.2,.7,.2,1), filter .35s ease;
}

.v51-featured .v51-media img{
  object-position:center 53%;
}

.v51-portrait .v51-media img{
  object-position:center center;
}

.v51-type{
  position:absolute;
  left:16px;
  top:16px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.48);
  background:rgba(12,14,15,.58);
  backdrop-filter:blur(8px);
  color:white;
  font-size:.68rem;
  font-weight:750;
  letter-spacing:.12em;
}

.v51-play{
  position:absolute;
  inset:50% auto auto 50%;
  translate:-50% -50%;
  z-index:2;
  width:62px;
  height:62px;
  border-radius:50%;
  display:grid;
  place-items:center;
  padding-left:4px;
  border:1px solid rgba(255,255,255,.72);
  background:rgba(11,13,14,.36);
  backdrop-filter:blur(8px);
  color:white;
  font-size:1.1rem;
  transition:transform .25s ease, background .25s ease;
}

.v51-meta{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:end;
  padding-top:13px;
  border-top:1px solid transparent;
}

.v51-meta h3{
  margin:0 0 4px;
  font-size:clamp(1.08rem,1.6vw,1.35rem);
  font-weight:650;
}

.v51-meta p{
  margin:0;
  color:#777873;
  font-size:.88rem;
}

.v51-action{
  flex:0 0 auto;
  color:#6c6d69;
  font-size:.82rem;
  white-space:nowrap;
}

.v51-note{
  margin:36px 0 0;
  font-size:.78rem;
  color:#858680;
}

@media (hover:hover) and (pointer:fine){
  .v51-card:hover .v51-media img{
    transform:scale(1.025);
    filter:brightness(.9);
  }
  .v51-card:hover .v51-play{
    transform:scale(1.08);
    background:rgba(11,13,14,.55);
  }
  .v51-card:hover .v51-action{
    color:#111315;
  }
}

@media(max-width:900px){
  .v51-wide{grid-column:span 8;}
  .v51-portrait{grid-column:span 4;}
  .v51-half,.v51-classic,.v51-adidas{grid-column:span 6;}
  .v51-play{width:54px;height:54px;}
}

@media(max-width:680px){
  .v51-portfolio-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:26px 14px;
  }

  .v51-wide,
  .v51-half,
  .v51-classic,
  .v51-adidas{
    grid-column:span 2;
  }

  .v51-portrait{
    grid-column:span 1;
  }

  .v51-portrait + .v51-half{
    grid-column:span 1;
  }

  .v51-portrait + .v51-half .v51-landscape{
    aspect-ratio:9/15;
  }

  .v51-portrait + .v51-half .v51-media img{
    object-fit:cover;
  }

  .v51-meta{
    display:block;
  }

  .v51-action{
    display:block;
    margin-top:7px;
  }

  .v51-type{
    left:10px;
    top:10px;
    min-height:25px;
    padding:0 8px;
    font-size:.58rem;
  }

  .v51-play{
    width:48px;
    height:48px;
    font-size:.9rem;
  }
}

@media(max-width:430px){
  .v51-portfolio-grid{
    display:grid;
    grid-template-columns:1fr;
  }

  .v51-wide,
  .v51-portrait,
  .v51-half,
  .v51-classic,
  .v51-adidas{
    grid-column:auto;
  }

  .v51-portrait .v51-vertical{
    aspect-ratio:9/13;
  }

  .v51-portrait + .v51-half .v51-landscape{
    aspect-ratio:16/10;
  }
}