@layer bricks {@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes scrolling{0%{opacity:1}to{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px)}}a.brxe-image{display:inline-block}figure.brxe-image{margin:0}:where(.brxe-image).tag{display:inline-block;height:fit-content;position:relative;width:auto}:where(.brxe-image).caption{position:relative}:where(.brxe-image).caption:has(figcaption.bricks-image-caption){overflow:hidden}:where(.brxe-image).overlay{position:relative}:where(.brxe-image).overlay:before{bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}:where(.brxe-image):before{border-radius:inherit}:where(.brxe-image) a{border-radius:inherit;position:static;transition:inherit}:where(.brxe-image) picture{border-radius:inherit;transition:inherit}:where(.brxe-image) img{border-radius:inherit;height:100%;position:static!important;transition:inherit;width:100%}:where(.brxe-image) img.bricks-lazy-hidden+figcaption{display:none}:where(.brxe-image) .icon{color:#fff;font-size:60px;pointer-events:none;position:absolute;right:50%;text-align:center;top:50%;transform:translate(50%,-50%);z-index:5}:where(.brxe-image) .bricks-image-caption{background:linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.25) 70%,transparent);bottom:0;color:#fff;font-size:inherit;margin:0;padding:10px 15px;pointer-events:none;position:absolute;text-align:center;width:100%;z-index:1}}@layer bricks {:where(.brxe-heading).has-separator{align-items:center;display:inline-flex;gap:20px}:where(.brxe-heading)>[contenteditable]{display:inline-block;text-decoration:inherit}:where(.brxe-heading) .separator{border-top:1px solid;flex-grow:1;flex-shrink:0;height:1px}}@layer jf-components { .jf-blog-page { color: var(--jf-color-black); } .jf-blog-topbar { padding: 56px 0 36px; } .jf-blog-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 18px; background: rgba(255, 255, 255, 0.9); border-radius: 14px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); } .jf-blog-topbar__brand { display: inline-flex; align-items: center; gap: 10px; } .jf-blog-topbar__brand-word { font-family: var(--jf-font-nav); font-size: 0.9rem; font-weight: var(--jf-weight-medium); line-height: 1; color: #686868; } .jf-blog-topbar__brand-grid { display: inline-grid; grid-template-columns: repeat(5, 0.92rem); gap: 0.08rem; } .jf-blog-topbar__brand-cell { display: grid; place-items: center; width: 0.92rem; height: 0.92rem; border-radius: 0.12rem; color: #fff; font-family: var(--jf-font-heading); font-size: 0.7rem; font-weight: var(--jf-weight-bold); line-height: 1; } .jf-blog-topbar__brand-cell--purple { background: #8d7fc0; } .jf-blog-topbar__brand-cell--blue { background: #35bfe9; } .jf-blog-topbar__brand-cell--green { background: #59bb6a; } .jf-blog-topbar__brand-cell--amber { background: #ffb800; } .jf-blog-topbar__brand-cell--pink { background: #ef506d; } .jf-blog-topbar__nav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 18px; font-family: var(--jf-font-nav); font-size: 0.74rem; font-weight: var(--jf-weight-medium); } .jf-blog-topbar__nav a:hover { color: var(--jf-color-purple-btn); } .jf-blog-topbar__cta { padding: 8px 12px; border-radius: 8px; color: #000; } .jf-blog-topbar__cta--amber { background: #ffb800; } .jf-blog-topbar__cta--blue { background: #35bfe9; } .jf-blog-listing { padding: 10px 0 118px; } .jf-blog-listing__title { margin: 0 0 26px; font-family: var(--jf-font-heading); font-size: clamp(2.1rem, 2.8vw, 3.5rem); font-weight: var(--jf-weight-black); line-height: 1; color: #000; } .jf-blog-filters { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; } .jf-blog-filter { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 5px 10px; font-family: var(--jf-font-heading); font-size: 0.84rem; font-weight: var(--jf-weight-black); line-height: 1; color: #000; transform-origin: center; } .jf-blog-filter--all { background: #fff; border: 1px solid #d8d8d8; transform: rotate(-4deg); } .jf-blog-filter--green { background: #59bb6a; transform: rotate(-4deg); } .jf-blog-filter--amber { background: #ffb800; transform: rotate(-6deg); } .jf-blog-filter--pink { background: #ef506d; transform: rotate(-7deg); } .jf-blog-filter--purple { background: #8d7fc0; transform: rotate(-7deg); } .jf-blog-filter--blue { background: #35bfe9; transform: rotate(-7deg); } .jf-blog-featured { display: grid; grid-template-columns: minmax(360px, 0.84fr) minmax(480px, 1.16fr); align-items: stretch; gap: 0; margin-bottom: 34px; } .jf-blog-featured__content { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 18px; padding: 48px 52px; background: #59bb6a; border-radius: 30px 0 0 30px; position: relative; } .jf-blog-featured__media { overflow: hidden; border-radius: 30px; margin-left: -42px; box-shadow: 0 12px 26px rgba(0, 0, 0, 0.04); z-index: 9; } .jf-blog-featured__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .jf-blog-featured__title { margin: 0; font-family: var(--jf-font-heading); font-size: clamp(1.8rem, 2vw, 2.3rem); font-weight: var(--jf-weight-black); line-height: 1.05; color: #000; } .jf-blog-featured__copy { max-width: 34ch; margin: 0; font-family: var(--jf-font-body); font-size: 1.05rem; line-height: 1.55; color: #0a0a0a; } .jf-blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 38px; place-items: stretch; } .jf-blog-card { display: flex; flex-direction: column; position: relative; border-radius: 30px; overflow: hidden; } .jf-blog-card--pink { background: #ef506d; } .jf-blog-card--blue { background: #35bfe9; } .jf-blog-card--purple { background: #8d7fc0; } .jf-blog-card--green { background: #59bb6a; } .jf-blog-card--amber { background: #ffb800; } .jf-blog-card--white { background: #FAFAFA; } .jf-blog-card__media { position: relative; overflow: hidden; } .jf-blog-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .jf-blog-card__media--top { aspect-ratio: 453 / 214; border-radius: 20px 20px 0 0; } .jf-blog-card__media--bottom { border-radius: 10px; aspect-ratio: 453 / 214; } .jf-blog-card__body { display: flex; flex-direction: column; gap: 14px; padding: 18px 24px 24px; } .jf-blog-card__body--tight { padding: 50px 24px 24px; } .jf-blog-card h3 { margin: 0; font-family: var(--jf-font-heading); font-size: 1.75rem; font-weight: var(--jf-weight-black); line-height: 1.04; color: #000; } .jf-blog-card p { margin: 0; font-family: var(--jf-font-body); font-size: 1rem; line-height: 1.5; color: #111; } .jf-blog-card__tag { position: absolute; top: var(--jf-space-s); left: var(--jf-space-s); z-index: 2; box-shadow: var(--jf-shadow-xs); width: fit-content; padding: 5px 10px; font-family: var(--jf-font-heading); font-size: var(--text-s); font-weight: var(--jf-weight-black); line-height: 1; color: #000; transform-origin: center; } .jf-blog-card__tag--white { background: #fff; transform: rotate(-5deg); margin: 0; } .jf-blog-card__tag--pink { background: #ef506d; transform: rotate(-7deg); } .jf-blog-card__tag--green { background: #59bb6a; transform: rotate(-5deg); margin: 0 0 10px; } .jf-blog-card__tag--blue { background: #35bfe9; transform: rotate(-6deg); } .jf-blog-card__tag--amber { background: #ffb800; transform: rotate(-7deg); } .jf-blog-card__tag--purple { background: #8d7fc0; transform: rotate(-7deg); margin: 0 0 10px; } @media (max-width: 1180px) { .jf-blog-featured { grid-template-columns: 1fr; } .jf-blog-featured__content { border-radius: 30px 30px 0 0; } .jf-blog-featured__media { margin-left: 0; border-radius: 0 0 30px 30px; aspect-ratio: 844 / 380; } .jf-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .jf-blog-topbar { padding-top: 28px; } .jf-blog-topbar__inner { align-items: flex-start; } .jf-blog-topbar__nav { justify-content: flex-start; gap: 12px; font-size: 0.68rem; } .jf-blog-listing { padding-bottom: 90px; } .jf-blog-featured__content { padding: 28px; } .jf-blog-grid { grid-template-columns: 1fr; gap: 24px; } .jf-blog-card__media--bottom{order:-1;} .jf-blog-card h3 { font-size: 1.5rem; } .jf-blog-featured__content { padding: 55px 28px; border-radius: 0px 0px 30px 30px; } .jf-blog-featured__content .jf-blog-card__tag{ z-index: 9; } .jf-blog-featured__media{ order: -1; z-index: 9; margin-bottom: -20px; border-radius: 30px; } }}