.pec{display:block;--pec-radius: clamp(10px, 1.5vw, 16px);--pec-gap: clamp(14px, 2vw, 24px);--pec-cols: 3;--pec-accent: #1565c0}.pec__wrapper{padding-top:calc(var(--padding-top, 56px) * .75);padding-bottom:calc(var(--padding-bottom, 56px) * .75)}@media screen and (min-width:768px){.pec__wrapper{padding-top:var(--padding-top, 56px);padding-bottom:var(--padding-bottom, 56px)}}.pec__head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem 1.5rem;flex-wrap:wrap;margin-bottom:clamp(1.2rem,3vw,2rem)}.pec__heading-group{display:flex;flex-direction:column;gap:.45rem;min-width:0}.pec h2.pec__heading{margin:0;letter-spacing:.03em;font-weight:600;line-height:1.15;color:#333}.pec h2.pec__heading.h2{font-size:var(--heading-size-h2)}.pec h2.pec__heading.h1{font-size:var(--heading-size-h1)}.pec h2.pec__heading.h0{font-size:var(--heading-size-h0)}.pec__subheading{margin:0;font-size:var(--content-lead-size);letter-spacing:.04em;color:#333333b8;max-width:60ch}.pec__controls{display:flex;align-items:center;gap:.7rem;flex-shrink:0}.pec__arrow{display:flex;align-items:center;justify-content:center;width:42px;height:42px;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:var(--pec-radius);color:#333;cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .2s ease,color .2s ease}.pec__arrow:hover{background:var(--pec-accent);border-color:var(--pec-accent);color:#fff}.pec__arrow--prev:hover{transform:translate(-2px)}.pec__arrow--next:hover{transform:translate(2px)}.pec__arrow[disabled]{opacity:.3;pointer-events:none}.pec__counter{display:flex;align-items:center;gap:.3rem;font-size:var(--content-body-size);letter-spacing:.06em;color:#3339;white-space:nowrap;min-width:3.2em;justify-content:center}.pec__counter-sep{opacity:.4}.pec__slider{display:flex;flex-wrap:nowrap;gap:var(--pec-gap);margin:0;padding:0 0 .25rem;list-style:none}.pec__slide{flex:0 0 auto;width:82%;max-width:340px;scroll-snap-align:start}@media screen and (min-width:768px){.pec__slide{width:calc((100% - (var(--pec-cols) - 1) * var(--pec-gap)) / var(--pec-cols));max-width:none}}.pec__card{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:var(--pec-radius);overflow:hidden;box-shadow:0 2px 10px #0000000f;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}a.pec__card{text-decoration:none;color:inherit}.pec__card:hover{transform:translateY(-4px);box-shadow:0 12px 28px #0000001f;border-color:#1565c040}.pec__media{position:relative;width:100%;overflow:hidden;aspect-ratio:4 / 3;background-color:rgba(var(--color-foreground),.06)}.pec--ratio-16-9 .pec__media{aspect-ratio:16 / 9}.pec--ratio-3-2 .pec__media{aspect-ratio:3 / 2}.pec--ratio-1-1 .pec__media{aspect-ratio:1 / 1}@supports not (aspect-ratio: 4 / 3){.pec__media{height:0;padding-bottom:75%}.pec--ratio-16-9 .pec__media{padding-bottom:56.25%}.pec--ratio-3-2 .pec__media{padding-bottom:66.66%}.pec--ratio-1-1 .pec__media{padding-bottom:100%}.pec__media img,.pec__media svg{position:absolute;top:0;right:0;bottom:0;left:0}}.pec__media img,.pec__media svg{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .6s cubic-bezier(.25,.46,.45,.94)}.pec__card:hover .pec__media img{transform:scale(1.05)}.pec__body{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;padding:clamp(.9rem,2vw,1.2rem)}.pec__tag{display:inline-flex;align-items:center;gap:.45rem;font-size:var(--content-eyebrow-size);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--pec-accent);background:#1565c014;border:1px solid rgba(21,101,192,.18);padding:.28em .7em;border-radius:8px;line-height:1.5}.pec__tag-sep{display:inline-block;width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.55;flex-shrink:0}.pec__title{margin:0;font-size:var(--content-lead-size);font-weight:600;letter-spacing:.01em;color:#333;line-height:1.25}.pec__desc{margin:0;font-size:var(--content-body-size);color:#333333a8;line-height:1.5}.pec__empty{padding:2rem;text-align:center;color:#3333338c;border:1px dashed rgba(0,0,0,.15);border-radius:var(--pec-radius)}@media screen and (max-width:767px){.pec__arrow{width:38px;height:38px}}
/*# sourceMappingURL=/cdn/shop/t/33/assets/section-project-examples.css.map */