/* thu-vien-portfolio.blade.php: Tailwind step 2. Utilities live in the markup; built by work/tw/build-tools.sh (content: thu-vien-portfolio.classes). */

/*! tw-utilities */

:where(.cmt) .\[\&\.is-broken\]\:tw-flex.is-broken {
  display: flex
}

:where(.cmt) .\[\&\.is-broken\]\:tw-items-center.is-broken {
  align-items: center
}

:where(.cmt) .\[\&\.is-broken\]\:tw-justify-center.is-broken {
  justify-content: center
}

:where(.cmt) .\[\&\.is-broken\]\:tw-p-\[18px\].is-broken {
  padding: 18px
}

:where(.cmt) .\[\&\.is-broken\]\:tw-text-center.is-broken {
  text-align: center
}

:where(.cmt) .\[\&\.is-broken\]\:tw-text-\[14px\].is-broken {
  font-size: 14px
}

:where(.cmt) .\[\&\.is-broken\]\:tw-css-text-decoration-\[none\].is-broken {
  text-decoration: none
}

:where(.cmt) .\[\&\.is-broken\]\:tw-css-color-\[var\(--ink-2\2c _\#6E6E73\)\].is-broken {
  color: var(--ink-2, #6E6E73)
}

:where(.cmt) .\[\&_a\.active\:hover\]\:tw-css-background-\[var\(--accent\2c _\#1D1D1F\)\] a.active:hover {
  background: var(--accent, #1D1D1F)
}

:where(.cmt) .\[\&_a\.active\:hover\]\:tw-css-color-\[var\(--on-accent\2c _\#fff\)\] a.active:hover {
  color: var(--on-accent, #fff)
}

:where(.cmt) .\[\&_a\.active\]\:tw-css-background-\[var\(--accent\2c _\#1D1D1F\)\] a.active {
  background: var(--accent, #1D1D1F)
}

:where(.cmt) .\[\&_a\.active\]\:tw-css-color-\[var\(--on-accent\2c _\#fff\)\] a.active {
  color: var(--on-accent, #fff)
}

:where(.cmt) .\[\&_button\.active\]\:tw-css-background-\[var\(--surface\2c _\#fff\)\] button.active {
  background: var(--surface, #fff)
}

:where(.cmt) .\[\&_button\.active\]\:tw-css-box-shadow-\[0_1px_2px_rgba\(17\2c _19\2c _21\2c _\.1\)\] button.active {
  box-shadow: 0 1px 2px rgba(17, 19, 21, .1)
}

:where(.cmt) .\[\&_button\.active\]\:tw-css-color-\[var\(--ink\2c _\#1D1D1F\)\] button.active {
  color: var(--ink, #1D1D1F)
}

:where(.cmt) .\[\&_img\]\:tw-css-transition-\[transform_\.25s_ease\] img {
  transition: transform .25s ease
}

@media (prefers-reduced-motion: reduce) {
  :where(.cmt) .mq1-motion-reduce\:\[\&_img\]\:tw-css-transition-\[none\] img {
    transition: none
  }
}

:where(.cmt) .pf-card:hover .\[\.pf-card\:hover_\&_img\]\:tw-css-transform-\[scale\(1\.03\)\] img {
  transform: scale(1.03)
}

@media (prefers-reduced-motion: reduce) {
  :where(.cmt) .pf-card:hover .mq1-motion-reduce\:\[\.pf-card\:hover_\&_img\]\:tw-css-transform-\[none\] img {
    transform: none
  }
}