/* =====================================================================
   TradieSpark - Blog page + single post (Astra child)
   Same tokens as the Elementor pages: Inter / Plus Jakarta Sans,
   ink #1E1E1E, navy #0C1B27, cyan #0EB9D5, aqua #DFF1F2, paper #F6FAFA
   ===================================================================== */
.ts-blog-view,
.ts-bsc {
  --ink: #1E1E1E;
  --navy: #0C1B27;
  --navy2: #13283A;
  --cyan: #0EB9D5;
  --cyan-d: #0893AA;
  --aqua: #DFF1F2;
  --paper: #F6FAFA;
  --muted: #5F6A72;
  --body: #3F4A51;
  --line: rgba(30, 30, 30, .1);
  --fh: Inter, system-ui, -apple-system, sans-serif;
  --fb: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.2, .75, .15, 1);
}

.ts-blog-view {
  background: #fff
}

/* Astra wrappers: let our sections run full width */
.ts-blog-view #content,
.ts-blog-view .site-content {
  padding: 0 !important;
  margin: 0 !important
}

.ts-blog-view .site-content>.ast-container {
  display: block !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important
}

.ts-blog-view #primary,
.ts-blog-view #secondary {
  display: none
}

.ts-blog,
.ts-single,
.ts-bsc {
  font-family: var(--fb);
  color: var(--ink);
  -webkit-font-smoothing: antialiased
}

.ts-blog *,
.ts-single *,
.ts-bsc * {
  box-sizing: border-box
}

.ts-blog a,
.ts-single a,
.ts-bsc a {
  text-decoration: none !important
}

.ts-bsc.ts-cats {
  margin-top: 0
}

.ts-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px
}

.ts-wrap--mid {
  max-width: 960px
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap
}

/* ---------- shared bits ---------- */
.ts-tkick {
  display: block;
  width: 56px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--cyan) 60%, rgba(14, 185, 213, .25));
  margin-bottom: 26px
}

.ts-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font: 600 13px/1.4 var(--fb);
  color: var(--muted);
  margin-bottom: 22px
}

.ts-crumbs a {
  color: var(--muted);
  transition: color .25s
}

.ts-crumbs a:hover {
  color: var(--cyan-d)
}

.ts-crumbs span {
  color: #B5BEC4
}

.ts-tpill {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--aqua);
  color: var(--cyan-d) !important;
  font: 700 12px/1 var(--fh);
  letter-spacing: .02em;
  transition: background .25s, color .25s
}

.ts-tpill:hover {
  background: var(--cyan);
  color: var(--ink) !important
}

.ts-tpill--line {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--body) !important
}

.ts-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  font: 500 13px/1.4 var(--fb);
  color: var(--muted)
}

.ts-meta__txt {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px
}

.ts-tbtn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 8px 8px 8px 24px;
  border-radius: 999px;
  font: 700 16px/1.2 var(--fh);
  letter-spacing: -.01em;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color .4s
}

.ts-tbtn i {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  transition: transform .35s var(--ease), background .3s
}

.ts-tbtn i svg {
  width: 16px;
  height: 16px
}

.ts-tbtn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateY(102%);
  transition: transform .6s var(--ease)
}

.ts-tbtn--cyan {
  background: var(--cyan);
  color: var(--ink) !important
}

.ts-tbtn--cyan i {
  background: var(--ink);
  color: #fff
}

.ts-tbtn--cyan::before {
  background: var(--ink)
}

@media (hover:hover) {
  .ts-tbtn--cyan:hover {
    color: #fff !important
  }

  .ts-tbtn--cyan:hover::before {
    transform: none
  }

  .ts-tbtn--cyan:hover i {
    background: var(--cyan);
    color: var(--ink);
    transform: rotate(-45deg)
  }
}

.ts-tbtn:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px
}

.ts-tbtn--full {
  width: 100%;
  justify-content: space-between
}

.ts-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  display: grid;
  place-items: center;
  color: var(--ink);
  transition: background .3s, transform .4s var(--ease), border-color .3s;
  flex: none
}

.ts-circle svg {
  width: 18px;
  height: 18px
}

.ts-circle:hover {
  background: var(--cyan);
  border-color: var(--cyan);
  transform: rotate(45deg)
}

/* ---------- blog hero ---------- */
.ts-bhero {
  background: var(--paper);
  background-image: radial-gradient(circle at 1px 1px, rgba(30, 30, 30, .07) 1px, transparent 0);
  background-size: 28px 28px;
  padding: 76px 0 48px;
  border-bottom: 1px solid var(--line)
}

.ts-bhero__h {
  font: 900 clamp(48px, 7vw, 104px)/.95 var(--fh);
  letter-spacing: -.055em;
  margin: 0;
  color: var(--ink)
}

.ts-bhero__p {
  max-width: 620px;
  margin-top: 22px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--muted)
}

.ts-bhero__p p {
  margin: 0
}

.ts-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 36px
}

.ts-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  font: 700 14px/1 var(--fh);
  color: var(--ink) !important;
  transition: border-color .25s, background .25s, color .25s
}

.ts-cat sup {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  top: 0;
  vertical-align: baseline
}

.ts-cat:hover {
  border-color: var(--cyan)
}

.ts-cat.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff !important
}

.ts-cat.is-on sup {
  color: var(--cyan)
}

/* ---------- cards ---------- */
.ts-posts {
  padding: 56px 0 110px;
  background: #fff
}

.ts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px
}

.ts-feature {
  margin-bottom: 56px
}

.ts-bcard {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 24px;
  background: #fff;
  transition: transform .5s var(--ease)
}

.ts-bcard__media {
  display: block;
  position: relative;
  aspect-ratio: 16/10;
  border-radius: 20px;
  overflow: hidden;
  background: var(--navy)
}

.ts-bcard__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease)
}

.ts-bcard__ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--navy);
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .08) 1px, transparent 0), radial-gradient(120% 90% at 85% 0%, rgba(14, 185, 213, .35), transparent 60%);
  background-size: 22px 22px, 100% 100%
}

.ts-bcard__ph-mark {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--cyan);
  color: var(--navy);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 12px rgba(14, 185, 213, .12)
}

.ts-bcard__ph-mark svg {
  width: 34px;
  height: 34px
}

.ts-bcard__body {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 4px 0
}

.ts-bcard__title {
  font: 800 22px/1.25 var(--fh);
  letter-spacing: -.025em;
  margin: 16px 0 10px;
  color: var(--ink)
}

.ts-bcard__title a {
  color: inherit !important;
  background: linear-gradient(var(--cyan), var(--cyan)) 0 100%/0 2px no-repeat;
  transition: background-size .5s var(--ease)
}

.ts-bcard__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1
}

/* whole card is clickable */
.ts-bcard__excerpt {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.ts-bcard__go {
  display: none
}

.ts-bcard:hover .ts-bcard__media img {
  transform: scale(1.045)
}

.ts-bcard:hover .ts-bcard__title a,
.ts-bcard:focus-within .ts-bcard__title a {
  background-size: 100% 2px
}

.ts-bcard__title a:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px
}

/* featured (first post on page one) */
.ts-bcard--feature {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 48px;
  align-items: center
}

.ts-bcard--feature .ts-bcard__media {
  aspect-ratio: 16/11;
  border-radius: 28px
}

.ts-bcard--feature .ts-bcard__body {
  padding: 0
}

.ts-bcard--feature .ts-bcard__title {
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.08;
  letter-spacing: -.04em;
  margin: 20px 0 16px
}

.ts-bcard--feature .ts-bcard__excerpt {
  font-size: 17.5px;
  -webkit-line-clamp: 4
}

.ts-bcard--feature .ts-bcard__go {
  display: grid;
  width: 52px;
  height: 52px;
  margin-top: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  place-items: center;
  transition: background .3s, transform .4s var(--ease)
}

.ts-bcard--feature .ts-bcard__go svg {
  width: 18px;
  height: 18px
}

.ts-bcard--feature:hover .ts-bcard__go {
  background: var(--cyan);
  color: var(--ink);
  transform: rotate(-45deg)
}

/* pagination */
.ts-pager {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 64px
}

.ts-pager .page-numbers {
  min-width: 46px;
  height: 46px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  display: inline-grid;
  place-items: center;
  font: 700 15px/1 var(--fh);
  color: var(--ink) !important;
  transition: border-color .25s, background .25s, color .25s
}

.ts-pager .page-numbers svg {
  width: 16px;
  height: 16px
}

.ts-pager a.page-numbers:hover {
  border-color: var(--cyan)
}

.ts-pager .page-numbers.current {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff !important
}

.ts-pager .dots {
  border: 0
}

.ts-admin-note {
  padding: 20px 24px;
  border: 1px dashed var(--line);
  border-radius: 16px;
  color: var(--muted);
  font-size: 15px
}

/* ---------- closing CTA band ---------- */
.ts-band {
  padding: 0 0 110px;
  background: #fff
}

.ts-related+.ts-band {
  padding-top: 0
}

.ts-band__card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  background: var(--navy);
  border-radius: 32px;
  padding: 56px 60px;
  color: #fff;
  isolation: isolate
}

.ts-band__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60% 120% at 100% 0%, rgba(14, 185, 213, .28), transparent 60%), radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .06) 1px, transparent 0);
  background-size: 100% 100%, 24px 24px
}

.ts-band__h {
  font: 900 clamp(30px, 3.6vw, 48px)/1.02 var(--fh);
  letter-spacing: -.045em;
  margin: 0;
  color: #fff
}

.ts-band__p {
  margin: 16px 0 0;
  max-width: 520px;
  font-size: 17px;
  line-height: 1.6;
  color: #B4C2CC
}

.ts-band__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex: none
}

.ts-band__call,
.ts-aside__call {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 700 16px/1 var(--fh);
  color: #fff !important;
  transition: color .25s
}

.ts-band__call svg,
.ts-aside__call svg {
  width: 18px;
  height: 18px;
  color: var(--cyan)
}

.ts-band__call:hover,
.ts-aside__call:hover {
  color: var(--cyan) !important
}

/* ---------- single post ---------- */
.ts-progress {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  z-index: 100;
  pointer-events: none
}

.admin-bar .ts-progress {
  top: 32px
}

.ts-progress span {
  display: block;
  height: 100%;
  background: var(--cyan);
  transform-origin: left;
  transform: scaleX(var(--p, 0))
}

.ts-shero {
  background: var(--paper);
  background-image: radial-gradient(circle at 1px 1px, rgba(30, 30, 30, .07) 1px, transparent 0);
  background-size: 28px 28px;
  padding: 64px 0 0
}

.ts-shero__h {
  font: 900 clamp(38px, 5.4vw, 72px)/1 var(--fh);
  letter-spacing: -.05em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance
}

.ts-shero__p {
  margin: 24px 0 0;
  font-size: 20px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 760px
}

.ts-meta--lg {
  margin-top: 28px;
  padding-bottom: 56px;
  font-size: 14px
}

.ts-shero__img {
  margin: 0;
  position: relative;
  transform: translateY(0);
  margin-bottom: -120px;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 40px 80px -40px rgba(12, 27, 39, .45);
  aspect-ratio: 16/9;
  background: var(--navy)
}

.ts-shero__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.ts-shero__img figcaption {
  position: absolute;
  left: 16px;
  bottom: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(12, 27, 39, .7);
  color: #fff;
  font-size: 12.5px
}

.ts-shero:has(.ts-shero__img)+.ts-sbody,
.ts-shero:has(.ts-shero__img)~.ts-sbody {
  padding-top: 180px
}

.ts-sbody {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 72px;
  padding-top: 64px;
  padding-bottom: 100px;
  align-items: start
}

.ts-shero:not(:has(.ts-shero__img)) {
  border-bottom: 1px solid var(--line)
}

/* article typography */
.ts-prose {
  max-width: 740px;
  font-size: 18px;
  line-height: 1.75;
  color: var(--body)
}

.ts-prose>*:first-child {
  margin-top: 0
}

.ts-prose p {
  margin: 0 0 1.35em
}

.ts-prose h2,
.ts-prose h3,
.ts-prose h4 {
  font-family: var(--fh);
  color: var(--ink);
  scroll-margin-top: 110px
}

.ts-prose h2 {
  font-size: clamp(28px, 2.6vw, 36px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -.035em;
  margin: 2.1em 0 .7em
}

.ts-prose h3 {
  font-size: 23px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 1.8em 0 .6em
}

.ts-prose h4 {
  font-size: 19px;
  font-weight: 800;
  margin: 1.6em 0 .5em
}

.ts-prose a {
  color: var(--cyan-d) !important;
  background: linear-gradient(var(--cyan), var(--cyan)) 0 100%/100% 1.5px no-repeat;
  padding-bottom: 1px;
  transition: color .2s
}

.ts-prose a:hover {
  color: var(--ink) !important
}

.ts-prose strong {
  color: var(--ink)
}

.ts-prose ul,
.ts-prose ol {
  margin: 0 0 1.4em;
  padding-left: 1.3em
}

.ts-prose li {
  margin: .45em 0;
  padding-left: .3em
}

.ts-prose ul li::marker {
  color: var(--cyan)
}

.ts-prose ol li::marker {
  color: var(--cyan-d);
  font-weight: 800;
  font-family: var(--fh)
}

.ts-prose blockquote {
  margin: 2em 0;
  padding: 6px 0 6px 28px;
  border-left: 3px solid var(--cyan);
  font: 700 24px/1.4 var(--fh);
  letter-spacing: -.02em;
  color: var(--ink)
}

.ts-prose blockquote p {
  margin: 0
}

.ts-prose blockquote cite {
  display: block;
  margin-top: 12px;
  font: 500 14px var(--fb);
  color: var(--muted);
  font-style: normal
}

.ts-prose img {
  max-width: 100%;
  height: auto;
  border-radius: 18px
}

.ts-prose figure {
  margin: 2em 0
}

.ts-prose figcaption {
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted);
  text-align: center
}

.ts-prose hr {
  border: 0;
  height: 1px;
  background: var(--line);
  margin: 3em 0
}

.ts-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 2em 0;
  font-size: 16px;
  display: block;
  overflow-x: auto
}

.ts-prose th,
.ts-prose td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left
}

.ts-prose th {
  font-family: var(--fh);
  font-weight: 800;
  color: var(--ink);
  background: var(--paper)
}

.ts-prose code {
  font-size: .9em;
  background: var(--paper);
  padding: 2px 6px;
  border-radius: 6px
}

.ts-prose .wp-block-button__link {
  background: var(--cyan);
  color: var(--ink) !important;
  border-radius: 999px;
  padding: 14px 24px;
  font: 700 16px var(--fh);
  background-image: none
}

.ts-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--line)
}

/* aside: contents + CTA */
.ts-aside {
  position: relative;
  align-self: stretch
}

.ts-aside__in {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: 20px
}

.ts-toc {
  border-left: 2px solid var(--line);
  padding: 2px 0
}

.ts-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px
}

.ts-toc a {
  position: relative;
  display: block;
  padding: 7px 0 7px 18px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  font: 600 14px/1.4 var(--fb);
  color: var(--muted) !important;
  transition: color .25s, border-color .25s
}

.ts-toc li.h3 a {
  padding-left: 32px;
  font-weight: 500;
  font-size: 13.5px
}

.ts-toc a:hover {
  color: var(--ink) !important
}

.ts-toc a.is-on {
  color: var(--ink) !important;
  border-left-color: var(--cyan)
}

.ts-aside__cta {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  border-radius: 24px;
  padding: 26px 22px 24px;
  color: #fff;
  background-image: radial-gradient(80% 70% at 100% 0%, rgba(14, 185, 213, .3), transparent 60%)
}



.ts-aside__h {
  font: 800 22px/1.15 var(--fh);
  letter-spacing: -.03em;
  margin: 0 0 20px;
  color: #fff
}

.ts-aside__cta .ts-tbtn {
  font-size: 15px;
  padding-left: 18px
}

.ts-aside__call {
  margin-top: 16px;
  font-size: 15px
}

/* related */
.ts-related {
  padding: 90px 0 110px;
  background: var(--paper);
  border-top: 1px solid var(--line)
}

.ts-related+.ts-band {
  background: var(--paper)
}

.ts-related__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 40px
}

.ts-related__h {
  font: 900 clamp(36px, 4.4vw, 60px)/1 var(--fh);
  letter-spacing: -.05em;
  margin: 0;
  color: var(--ink)
}

.ts-related .ts-bcard {
  background: transparent
}

/* ---------- reveal (only when JS runs; respects reduced motion) ---------- */
.ts-js .ts-rv {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--d, 0ms)
}

.ts-js .ts-rv.is-in {
  opacity: 1;
  transform: none
}

/* ---------- responsive ---------- */
@media (max-width:1024px) {
  .ts-wrap {
    padding: 0 32px
  }

  .ts-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px
  }

  .ts-bcard--feature {
    grid-template-columns: 1fr;
    gap: 26px
  }

  .ts-sbody {
    grid-template-columns: 1fr;
    gap: 48px
  }

  .ts-aside__in {
    position: static
  }

  .ts-toc {
    display: none !important
  }

  .ts-prose {
    max-width: none
  }

  .ts-band__card {
    flex-direction: column;
    align-items: flex-start;
    padding: 48px 40px
  }

  .ts-shero:has(.ts-shero__img)~.ts-sbody {
    padding-top: 150px
  }
}

@media (max-width:767px) {
  .ts-wrap {
    padding: 0 18px
  }

  .ts-bhero {
    padding: 44px 0 30px
  }

  .ts-cats {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 28px -18px 0;
    padding: 0 18px 4px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent)
  }

  .ts-cats::-webkit-scrollbar {
    display: none
  }

  .ts-cat {
    flex: none;
    height: 40px;
    padding: 0 16px
  }

  .ts-posts {
    padding: 36px 0 80px
  }

  .ts-grid {
    grid-template-columns: 1fr;
    gap: 36px
  }

  .ts-feature {
    margin-bottom: 40px
  }

  .ts-bcard__title {
    font-size: 21px
  }

  .ts-shero {
    padding-top: 40px
  }

  .ts-shero__p {
    font-size: 17.5px
  }

  .ts-meta--lg {
    padding-bottom: 36px
  }

  .ts-shero__img {
    border-radius: 20px;
    margin-bottom: -60px
  }

  .ts-shero:has(.ts-shero__img)~.ts-sbody {
    padding-top: 96px
  }

  .ts-sbody {
    padding-top: 44px;
    padding-bottom: 70px
  }

  .ts-prose {
    font-size: 17px
  }

  .ts-prose blockquote {
    font-size: 20px;
    padding-left: 20px
  }

  .ts-related {
    padding: 64px 0 80px
  }

  .ts-band {
    padding-bottom: 80px
  }

  .ts-band__card {
    padding: 38px 24px;
    border-radius: 24px
  }

  .ts-band__actions {
    width: 100%
  }

  .ts-band .ts-tbtn {
    width: 100%;
    justify-content: center
  }

  .ts-pager {
    margin-top: 48px
  }
}

@media (prefers-reduced-motion:reduce) {
  .ts-js .ts-rv {
    opacity: 1;
    transform: none;
    transition: none
  }

  .ts-bcard__media img,
  .ts-tbtn,
  .ts-tbtn::before,
  .ts-tbtn i,
  .ts-circle,
  .ts-bcard__go {
    transition: none !important
  }
}