.app-container {
  .case-study-meta {
    .case-study-meta__container {
      position: relative;
      z-index: 2;
      max-width: 1192px;
      padding: 48px 100px;
      width: 100%;
      margin: auto;
      display: flex;
      flex-direction: column;
      gap: 32px;
      @media (max-width: 1400px) {
        padding: 48px 50px;
      }
      @media (max-width: 1000px) {
        padding: 32px 16px;
      gap: 16px;

      }
    }
    .case-study-meta__meta {
      display: flex;
      gap: 48px;
      @media (max-width: 1000px) {
       flex-direction: column;
       gap:24px;
      }
      .case-study-meta__group {
        display: flex;
        flex-direction: column;
        gap: 16px;
        @media (max-width: 1000px) {
     width: 100%;
         }
        &:first-child {
          border-right: 1px solid #e8e7e9;
          padding-right: 48px;
          min-width: fit-content;
          @media (max-width: 1000px) {
            width: 100%;
                }
        }
        .case-study-meta__group-item {
          display: flex;
          flex-direction: column;
          gap: 6px;
          p.title {
            color: #8c8992;
            font-size: 13px;
            font-weight: 400;
            margin-bottom: 0;
          }
          p.client,
          a.client {
            display: flex;
            align-items: center;
            gap: 4px;
            color: #191325;
            font-weight: 600;
            font-size: 13px;
            text-decoration: none;
          }
        }
      }
    }
    .case-study-meta__group-label {
      font-weight: 700;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: #7a7590;
      margin-bottom: 6px;
    }
    .case-study-meta__industry {
      .tag {
        font-size: 13px;
        font-weight: 400;
        color: #191325;
      }
    }
    .case-study-meta__tags {
      columns: 2;
      column-gap: 16px;
    }
  .project-sheet__logo {
    img {
      max-width: 200px;
      max-height: 100px;
      object-fit: contain;
    }
  }
    .case-study-meta__tags .tag {
      display: flex;
      margin-bottom: 8px;
      width: 100%;
      gap: 8px;
      color: #534e5c;
      font-size: 16px;
      font-weight: 400;
      svg {
        min-width: 24px;
      }
    }
  }
}


.case-study-meta.is-prep .case-study-meta__header .subheader,
.case-study-meta.is-prep .case-study-meta__header :where(h1,h2,h3,h4,h5,h6,p.title){
  opacity:0; transform:translateY(20px);
}
.case-study-meta.is-prep .case-study-meta__items .case-study-meta__item{
  opacity:0; transform:translateY(24px) scale(.98);
}

/* RUN (po dodaniu .animate-in) */
.case-study-meta.animate-in .case-study-meta__header .subheader{
  animation: ofFadeUp .55s cubic-bezier(.22,.65,.25,1) both;
}
.case-study-meta.animate-in .case-study-meta__header :where(h1,h2,h3,h4,h5,h6,p.title){
  animation: ofFadeUp .6s cubic-bezier(.22,.65,.25,1) .1s both;
}
.case-study-meta.animate-in .case-study-meta__items .case-study-meta__item{
  animation: ofCard .55s cubic-bezier(.22,.65,.25,1) both;
  animation-delay: calc(var(--i,0) * 80ms + 160ms);
}

/* subtelny hover kart */
.case-study-meta .case-study-meta__item{ transition: transform .25s ease, box-shadow .25s ease; }
.case-study-meta .case-study-meta__item:hover{ transform: translateY(-3px); }

/* keyframes */
@keyframes ofFadeUp{
  from{opacity:0; transform:translateY(20px)}
  to  {opacity:1; transform:translateY(0)}
}
@keyframes ofCard{
  0%  {opacity:0; transform:translateY(24px) scale(.98); filter:blur(2px)}
  100%{opacity:1; transform:translateY(0)   scale(1);    filter:blur(0)}
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .case-study-meta.animate-in .case-study-meta__header .subheader,
  .case-study-meta.animate-in .case-study-meta__header :where(h1,h2,h3,h4,h5,h6,p.title),
  .case-study-meta.animate-in .case-study-meta__items .case-study-meta__item{
    animation:none !important; opacity:1 !important; transform:none !important; filter:none !important;
  }
}