.text-two-color span{ color: var(--pico-primary);}.grad-card { position: relative; overflow: hidden; border-radius: 12px; min-height: 280px; display: flex; align-items: flex-end; padding: 1.5rem; color: #fff; transition: transform .35s ease, box-shadow .35s ease; aspect-ratio:1;}.grad-card::before { content: ""; position: absolute; inset: 0; background: var(--img) center / cover no-repeat; transition: transform .6s ease; z-index: 0;}.grad-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(0, 40, 86, .15) 0%, rgba(0, 40, 86, .6) 50%, rgba(0, 40, 86, .95) 100% ); transition: opacity .4s ease; z-index: 1;}.grad-card__content { position: relative; z-index: 2; }.grad-card__link { display: inline-flex; gap: 6px; transition: gap .3s ease;}.grad-card:hover { transform: translateY(-6px); box-shadow: 0 14px 28px rgba(0, 40, 86, .35); }.grad-card:hover::before { transform: scale(1.08); }.grad-card:hover::after { opacity: .85; }.grad-card:hover .grad-card__link { gap: 12px; }.text-2-line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;} .brxe-container {column-gap: 50px; row-gap: 50px; width: 100%; max-width: 1440px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px} .woocommerce main.site-main {width: 100%} #brx-content.wordpress {width: 100%; max-width: 1440px} body {font-family: "LINE Seed Sans TH"; color: var(--pico-text-v2); font-size: 16px} h1, h2, h3, h4, h5, h6 {font-family: "LINE Seed Sans TH"; line-height: 1.2; font-weight: 500} .brxe-section {padding-top: 50px; padding-bottom: 50px} .brxe-block {column-gap: 10px; row-gap: 10px} .bricks-button {border-radius: 4px; transition: all 0.3s} .bricks-button:where(.bricks-background-primary), .bricks-button:where(.bricks-color-primary) {color: var(--pico-white)} .bricks-button:where(.bricks-background-primary:not(.outline)) {background-color: var(--pico-primary)}