.app-container {
  .offer {
    .offer__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;

      }
    }
    .offer__item {
      width: calc(33.33% - 22px);
      @media (max-width: 768px) {
width: 100%;

      }
      p.title {
        display: flex;
        flex-direction: column;
        gap: 12px;
        color: #191325;
        font-weight: 600;
        font-size: 19px;
        margin-bottom: 8px;
      }
      .offer__item-after {
        opacity: 0;
        visibility: hidden;
        height: 0;
        transition: 0.3s;
        &.expanded {
          opacity: 1;
          visibility: visible;
          height: auto;
        }
      }
      .readmore {
        display: flex;
        align-items: center;
        gap: 6px;
        position: relative;
        width: fit-content;
        color: #020202e6;
        font-weight: 600;
        text-decoration: none;
        font-size: 13px;
        cursor: pointer;
        background-color: transparent;
        border: 0;
        font-family: var(--mainfont);
        &::after {
          content: "";
          width: 9px;
          height: 1px;
          background-color: #020202e6;
          display: block;
        }
        &::before {
          content: "";
          width: 9px;
          height: 1px;
          background-color: rgba(2, 2, 2, 0.9019607843);
          display: block;
          position: absolute;
          transform: rotate(90deg);
          right: 0px;
          transition: 0.3s;
        }
        &.expanded {
          &::before {
            transform: rotate(180deg);
          }
        }
      }
    }
    .offer__items {
      display: flex;
      flex-wrap: wrap;
      gap: 32px;

    }
  }
}


/* START (sekcja ma w HTML klasę is-prep) */
.offer.is-prep .offer__header .subheader,
.offer.is-prep .offer__header :where(h1,h2,h3,h4,h5,h6,p.title){
  opacity:0; transform:translateY(20px);
}
.offer.is-prep .offer__items .offer__item{
  opacity:0; transform:translateY(24px) scale(.98);
}

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

/* subtelny hover kart */
.offer .offer__item{ transition: transform .25s ease, box-shadow .25s ease; }
.offer .offer__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){
  .offer.animate-in .offer__header .subheader,
  .offer.animate-in .offer__header :where(h1,h2,h3,h4,h5,h6,p.title),
  .offer.animate-in .offer__items .offer__item{
    animation:none !important; opacity:1 !important; transform:none !important; filter:none !important;
  }
}