.gallery-hero{
  position: relative;
  isolation: isolate;
  overflow: hidden;

  
  display: grid;
  grid-template-columns: 2fr 1fr;   
  align-items: center;
  gap: clamp(12px, 2vw, 24px);

  
  background:#090909;
  color:#fff;

  
  padding: clamp(6.5rem, 11vh, 9rem) clamp(1rem, 5vw, 3rem) clamp(.8rem, 2.5vh, 2rem);
  padding-top: calc(clamp(6.5rem, 11vh, 9rem) + env(safe-area-inset-top, 0px));

  
}


.gallery-hero::before{
  content:"";
  position:absolute; inset:0;
  background:url('images/svg/gravisual-hero-scanlight-wave.svg') no-repeat center / cover;
  opacity:.85; pointer-events:none; z-index:0;
  transform: rotate(-185deg);
}


.gallery-hero .hero-title-row,
.gallery-hero .hero-extra{ position:relative; z-index:1; }


.gallery-hero .hero-title-row{
  display:flex; align-items:flex-end;
  gap: clamp(8px, 1.6vw, 20px);
  position: relative; 
}
.gallery-hero .hero-title{
  margin:0; font-weight:800; line-height:1; letter-spacing:-.04em;
  font-size: clamp(2rem, 6.5vw, 4.2rem);
  margin-left: 30px;
}


.gallery-hero .portfolio-arrow{ 
  display:flex; 
  align-items:flex-end; 
  position: static; 
  margin: 0 !important;
}
.gallery-hero .portfolio-arrow svg{
  width: clamp(48px, 10vw, 128px);
  height: auto; display:block;
  animation: heroBounce 1.6s infinite;
}

@media (max-width: 900px){
  .gallery-hero{ position: relative; }
  .gallery-hero .portfolio-arrow{
    position: absolute;
    top: -10px;
    right: clamp(1rem, 4.5vw, 2rem);
    z-index: 2;
  }
}


.gallery-hero .hero-extra{
  margin-left:auto;           
  text-align:left;
  max-width: clamp(42ch, 48vw, 62ch);
}
.gallery-hero .hero-extra-text{
  margin-top: clamp(.8rem, 2vh, 2.2rem);
  font-size: clamp(0.9rem, 0.2vw, 1.22rem);
  line-height: 1.45;
  word-break: break-word;
  margin-right: 70px;
}


.gallery-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  padding: 1rem 6vw 4rem;
  background:#090909;
}
.gallery-item{ position:relative; overflow:hidden; border-radius:.5rem; background:#000; color:#fff; transition:transform .3s; }
.gallery-item img{
  width:100%; height:auto; display:block; transition:transform .4s;
  background:#ececec; border-radius:.5rem;
}
.gallery-item:hover img{ transform:scale(1.05); }
.gallery-item .overlay{
  position:absolute; left:0; right:0; bottom:0;
  background:rgba(0,0,0,.5); padding:.5rem; text-align:center;
  color:#fff; font-weight:600; font-size:.95rem; opacity:0; transition:opacity .3s;
}
.gallery-item:hover .overlay{ opacity:1; }


@media (max-width: 900px){
  .gallery-hero{
    grid-template-columns: 1fr;                
    row-gap: clamp(10px, 2.6vh, 18px);
    min-height: clamp(380px, 56vh, 360px);
    padding: clamp(6rem, 12vh, 8.5rem) clamp(1rem, 4.5vw, 2rem) 1rem;
  }
  .hero-subtitle a{ margin-left: 0 !important; }
  .gallery-hero .hero-title{ font-size: clamp(1.9rem, 8vw, 3rem); margin-left: 0 !important; }
  .gallery-hero .portfolio-arrow svg{ width: clamp(44px, 14vw, 90px); }

  
  .gallery-hero .hero-extra{
    grid-column: 1;           
    margin-left: 0;           
    justify-self: start;      
    align-self: start;
    max-width: 65ch;          
    width: min(100%, 65ch);
    text-align: left;
  }

  .gallery-grid{
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    padding: 1rem 4vw 1.7rem;
  }

  .gallery-hero::before{ background-position: center top; }
}

@media (max-width: 600px){
  .gallery-hero{
    min-height: clamp(360px, 62vh, 350px);
    padding-top: calc(clamp(5.8rem, 11vh, 7.2rem) + env(safe-area-inset-top, 0px));
    padding-left: clamp(1rem, 4vw, 1.6rem);
    padding-right: clamp(1rem, 4vw, 1.6rem);
  }
  .gallery-hero .hero-title{ font-size: clamp(1.8rem, 9vw, 2.7rem); }
  .gallery-hero .hero-extra-text{ font-size: .98rem; margin-top: -2.8rem; margin-left: -5px; padding: 30px;}
  .gallery-hero .portfolio-arrow svg{ width: clamp(56px, 16vw, 88px); }
  .gallery-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 480px){
  .gallery-hero{
    padding: calc(9.5rem + env(safe-area-inset-top, 0px)) 2.2rem 1rem;
  }
  .gallery-hero .hero-title{ font-size: 2.1rem; }
  .gallery-item img{ border-radius:.35em; }
}


@media (max-height: 700px) and (min-width: 900px){
  .gallery-hero{
    min-height: 250px;
    padding-top: clamp(5.6rem, 10vh, 7.2rem);
  }
  .gallery-hero .portfolio-arrow svg{ width: clamp(56px, 7vw, 88px); }
}


.gallery-hero .hero-title-row{ grid-column:1; grid-row:1; }
.gallery-hero .hero-article-title{
  grid-column:1; grid-row:2;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; text-overflow:ellipsis; 
    line-clamp: 2; 
}

@media (max-width:900px){
  .gallery-hero .hero-title-row,
  .gallery-hero .hero-article-title{ 
    grid-column:1; 
    grid-row:auto; 
    margin-top:90px;
    margin-left: 25px;
    margin-bottom: 90px;
   }
  
  .gallery-hero .hero-title-row{ padding-right: 64px; }
  .gallery-hero .hero-title{ max-width: 16ch; }
}


@media (prefers-reduced-motion: reduce){
  .gallery-hero .portfolio-arrow svg{ animation:none; }
}


@keyframes heroBounce{
  0%,100%{ transform: translateY(0); }
  50%    { transform: translateY(10px); }
}