.block {
  overflow:initial !important
}

.fotograf-works.hidden {
    display: none;
}

.fotograf-name {
    cursor: pointer;
}

.fotograf-name:hover {
    color:#f00;
}



.marker_button_letter {
    height: 30px;
    padding-top: 10px;
    padding-bottom: 5px;
    padding-left: 5px;
    color: #6f6f6f;
    font-weight: bolder;
    margin-top: 50px; 
  }
  
  .foto-credit-wrapper{
    container-name: foto_credit_container;
    container-type: inline-size;
    
    display: flex;
    _display:initial;
    flex-direction:column;
    padding:0px 30px;
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    height:100%;
  }
  .foto_letters {
      display: grid;
      margin-top: 5vh;
      gap:.1rem;
      grid-template-columns: repeat(auto-fill, minmax(var(--button-size),1fr));
      position: -webkit-sticky; /* Safari */
      position: sticky;
      offset-position: 50px;
      top: 50px;
      @supports (animation-timeline: view()) {
        top: 0rem;
        _backdrop-filter: blur(0.35rem);
        animation: stickyNav linear forwards;
        animation-timeline: view();
        animation-range-start: calc(100vh + 5vh);
        animation-range-end: calc(
          100vh + 5vh + 200px
        );
      }
      
  }
  @keyframes stickyNav {
  0%,
  100% {
    --_headerWidth: fit-content;
    --_logoDisplay: var(--_logoAfterAnimation);
  }
  
  100% {
    top: 80px;
    }
  }
  
  .select_letter {
      width: clamp(calc(var(--button-size)*.8),5vw,var(--button-size));
      font-size: clamp(.8em,3vw,1em);
      
  }
  @container foto_credit_container ( min-width: 200px ) {
    .foto_letters {
      position:relative;
    }
  }
  @container foto_credit_container ( min-width: 800px ) {
    .foto_letters {
      position:sticky;
    }
  }