/* Blog: single post (hero variant, meta bar, sidebar, article typography, related posts, author). */

/* Hero: text left, featured image right */
.vx-hero--post .vx-hero__content { align-items: flex-start; text-align: left; padding: calc(244 * var(--u)) 0 calc(80 * var(--u)) calc(217.5 * var(--u)); }
.vx-hero--post .vx-hero__heading { max-width: calc(640 * var(--u)); line-height: calc(79 / 80); margin-bottom: calc(12 * var(--u)); }
.vx-hero--post .vx-hero__text { max-width: calc(624 * var(--u)); }
.vx-hero__media { position: absolute; left: calc(999.5 * var(--u)); top: calc(200 * var(--u)); width: calc(657 * var(--u)); height: calc(479 * var(--u)); border-radius: calc(50 * var(--u)); overflow: hidden; }
.vx-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(1, 1, 1, 0) 56.6%, #010101 97.6%); }
.vx-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Meta bar */
.vx-post__meta { display: flex; justify-content: space-between; align-items: flex-start; margin-top: calc(36 * var(--u)); padding: calc(9 * var(--u)) calc(80 * var(--u)) calc(29 * var(--u)) calc(157 * var(--u)); border-bottom: 1px solid #e0e0ea; }
.vx-post__meta li { display: flex; gap: calc(14 * var(--u)); }
.vx-post__meta img { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.vx-post__meta li > span:last-child { display: grid; gap: calc(4 * var(--u)); color: var(--vx-grey); font-size: calc(18 * var(--u)); line-height: calc(23 / 18); letter-spacing: -0.05em; }
.vx-post__meta strong { color: var(--vx-ink); font-family: var(--vx-font-head); font-weight: 600; font-size: calc(20 * var(--u)); line-height: 1; letter-spacing: -0.05em; }
.vx-post__meta-author { align-items: center; margin-top: calc(-9 * var(--u)); }
.vx-post__avatar { width: calc(59 * var(--u)); height: calc(60 * var(--u)); border-radius: calc(57 * var(--u)); overflow: hidden; background: linear-gradient(1.4deg, #cbc82b 24%, #fff 70%); }
.vx-post__avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Layout */
.vx-post__layout { display: grid; grid-template-columns: calc(407 * var(--u)) minmax(0, 1fr); gap: calc(28 * var(--u)); align-items: start; margin-top: calc(67 * var(--u)); }
.vx-post__side { position: sticky; top: calc(24 * var(--u)); padding-top: calc(36 * var(--u)); }

.vx-toc__title { text-align: center; font-family: var(--vx-font-head); font-weight: 600; font-size: calc(30 * var(--u)); letter-spacing: -0.05em; line-height: 1.2; }
.vx-toc ol { position: relative; display: grid; gap: calc(25 * var(--u)); margin: calc(24 * var(--u)) 0 0; padding: 0 0 0 calc(74 * var(--u)); list-style: none; color: var(--vx-grey); font-size: calc(18 * var(--u)); line-height: calc(23 / 18); letter-spacing: -0.05em; }
.vx-toc ol::before { content: ""; position: absolute; left: calc(44 * var(--u)); top: calc(10 * var(--u)); bottom: calc(10 * var(--u)); width: 1px; background: #cfd3e6; }
.vx-toc li { position: relative; }
.vx-toc li::before { content: ""; position: absolute; left: calc(-39 * var(--u)); top: calc(2 * var(--u)); width: calc(19 * var(--u)); height: calc(19 * var(--u)); border-radius: 50%; border: calc(5 * var(--u)) solid var(--vx-bg); background: #b9bfd9; }
.vx-toc li.is-active::before { background: var(--vx-blue); }
.vx-toc a:hover, .vx-toc li.is-active a { color: var(--vx-blue); }

.vx-newsletter { margin-top: calc(44 * var(--u)); padding: calc(40 * var(--u)) calc(27 * var(--u)) calc(27 * var(--u)); border-radius: calc(30 * var(--u)); background: var(--vx-black) url("../img/newsletter.webp") center / cover no-repeat; color: #fff; text-align: center; }
.vx-newsletter h2 { font-family: var(--vx-font-head); font-weight: 600; font-size: calc(30 * var(--u)); line-height: 1.1; letter-spacing: -0.05em; }
.vx-newsletter > p { margin-top: calc(14 * var(--u)); opacity: .7; font-size: calc(18 * var(--u)); line-height: calc(25 / 18); letter-spacing: -0.05em; }
.vx-form--newsletter { display: grid; gap: calc(15 * var(--u)); margin-top: calc(26 * var(--u)); }
.vx-form--newsletter input[type="email"] { width: 100%; height: calc(60 * var(--u)); padding: 0 calc(22 * var(--u)); border: 1px solid #fff; border-radius: calc(20 * var(--u)); background: transparent; color: #fff; font: inherit; font-size: calc(18 * var(--u)); letter-spacing: -0.05em; outline: 0; }
.vx-form--newsletter ::placeholder { color: #fff; opacity: 1; }
.vx-form--newsletter .vx-form__submit { position: relative; justify-content: center; width: 100%; cursor: pointer; }
.vx-form--newsletter .vx-btn__icon { position: absolute; right: calc(7 * var(--u)); }
.vx-form--newsletter .vx-form__status { font-size: calc(16 * var(--u)); }
.vx-form--newsletter .vx-form__status:empty { display: none; }
.vx-form__hp { position: absolute; left: -9999px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Article */
.vx-article { padding: calc(45 * var(--u)) calc(48 * var(--u)) calc(60 * var(--u)) calc(52 * var(--u)); border-radius: calc(30 * var(--u)); background: #fff; color: var(--vx-grey); font-size: calc(18 * var(--u)); line-height: calc(23 / 18); letter-spacing: -0.05em; }
.vx-article > * { margin-block: calc(18 * var(--u)) 0; }
.vx-article > :first-child { margin-top: 0; }
.vx-article h2, .vx-article h3, .vx-article h4 { color: var(--vx-ink); font-weight: 500; letter-spacing: -0.05em; line-height: 1.2; scroll-margin-top: calc(30 * var(--u)); }
.vx-article > h2 { margin-top: calc(50 * var(--u)); font-size: calc(30 * var(--u)); }
.vx-article h3 { font-size: calc(25 * var(--u)); }
.vx-article a { color: var(--vx-blue); text-decoration: underline; text-underline-offset: 2px; }
.vx-article strong { color: var(--vx-ink); font-weight: 500; }
.vx-article ul, .vx-article ol { padding-left: 1.2em; }
.vx-article li + li { margin-top: calc(10 * var(--u)); }
.vx-article img { border-radius: calc(20 * var(--u)); }
.vx-article figcaption { margin-top: calc(10 * var(--u)); font-size: calc(15 * var(--u)); text-align: center; }

.vx-article .is-style-vx-lead { color: var(--vx-ink); font-size: calc(20 * var(--u)); }
.vx-article .is-style-vx-highlight { display: table; padding: calc(11 * var(--u)) calc(27 * var(--u)) calc(12 * var(--u)); border-radius: calc(20 * var(--u)); background: var(--vx-bg); color: var(--vx-blue); font-family: var(--vx-font-accent); font-style: italic; font-weight: 400; font-size: calc(25 * var(--u)); line-height: calc(29 / 25); }
.vx-article .is-style-vx-framed, .vx-article .wp-block-image.is-style-vx-framed { padding: calc(18 * var(--u)) calc(20 * var(--u)) calc(19 * var(--u)); border-radius: calc(30 * var(--u)); background: #eaeaef; }
.vx-article .is-style-vx-framed img { display: block; width: 100%; }

.vx-article blockquote { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: calc(257 * var(--u)); margin-inline: 0; margin-top: calc(38 * var(--u)); padding: calc(110 * var(--u)) calc(40 * var(--u)) calc(52 * var(--u)); border: 0; border-radius: calc(20 * var(--u)); background: var(--vx-blue) linear-gradient(117deg, #2b499f 28%, #cbc82b 125%); color: #fff; text-align: center; }
.vx-article blockquote::before { content: "\201C"; position: absolute; top: calc(37 * var(--u)); left: 50%; display: grid; place-items: center; width: calc(56 * var(--u)); height: calc(56 * var(--u)); padding-top: calc(14 * var(--u)); transform: translateX(-50%); border-radius: 50%; background: linear-gradient(95deg, #2b499f 15%, #cbc82b 134%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); font-family: var(--vx-font-accent); font-size: calc(44 * var(--u)); line-height: 1; }
.vx-article blockquote p { max-width: calc(600 * var(--u)); font-family: var(--vx-font-head); font-weight: 600; font-size: calc(30 * var(--u)); line-height: 1; letter-spacing: -0.05em; }
.vx-article blockquote cite { margin-top: calc(12 * var(--u)); font-size: calc(16 * var(--u)); font-style: normal; opacity: .8; }

.vx-article .is-style-vx-box, .vx-article .is-style-vx-box-lime { padding: calc(36 * var(--u)) calc(35 * var(--u)); border-radius: calc(30 * var(--u)); background: var(--vx-bg); margin-top: calc(38 * var(--u)); }
.vx-article .is-style-vx-box-lime { background: rgba(203, 200, 43, .1); }
.vx-article :is(.is-style-vx-box, .is-style-vx-box-lime) > .wp-block-group__inner-container > *, .vx-article :is(.is-style-vx-box, .is-style-vx-box-lime) > :not(.wp-block-group__inner-container) { margin-block: calc(18 * var(--u)) 0; }
.vx-article :is(.is-style-vx-box, .is-style-vx-box-lime) > .wp-block-group__inner-container > :first-child, .vx-article :is(.is-style-vx-box, .is-style-vx-box-lime) > :first-child { margin-top: 0; }
.vx-article .is-style-vx-box h2, .vx-article .is-style-vx-box-lime h2 { font-size: calc(30 * var(--u)); text-align: center; }

.vx-article .wp-block-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(15 * var(--u)) calc(13 * var(--u)); }
.vx-article .wp-block-columns + .wp-block-columns { margin-top: calc(15 * var(--u)); }
.vx-article .wp-block-column > * + * { margin-top: calc(15 * var(--u)); }
.vx-article .is-style-vx-number-card { display: flex; flex-direction: column; min-height: calc(277 * var(--u)); padding: calc(43 * var(--u)) calc(40 * var(--u)) calc(30 * var(--u)); border-radius: calc(30 * var(--u)); background: var(--vx-bg); text-align: center; }
.vx-article .is-style-vx-number-card > .wp-block-group__inner-container { display: flex; flex: 1; flex-direction: column; align-items: center; }
.vx-article .is-style-vx-number-card-legacy { display: flex; flex-direction: column; align-items: center; min-height: calc(277 * var(--u)); padding: calc(43 * var(--u)) calc(40 * var(--u)) calc(30 * var(--u)); border-radius: calc(30 * var(--u)); background: var(--vx-bg); text-align: center; }
.vx-article .is-style-vx-number-card .wp-block-group__inner-container > * + * { margin-top: calc(14 * var(--u)); }
.vx-article .is-style-vx-number-card .wp-block-group__inner-container > p:first-child { color: var(--vx-blue); font-weight: 700; font-size: calc(30 * var(--u)); }
.vx-article .is-style-vx-number-card .wp-block-group__inner-container > p:last-child { margin-top: auto; padding-top: calc(14 * var(--u)); color: var(--vx-ink); font-size: calc(16 * var(--u)); }

.vx-article .is-style-vx-checklist { display: grid; gap: calc(21 * var(--u)); padding: 0; list-style: none; }
.vx-article .is-style-vx-checklist li { margin: 0; padding-left: calc(48 * var(--u)); background: url("../img/check.svg") 0 0 / calc(28 * var(--u)) no-repeat; min-height: calc(28 * var(--u)); }

/* Related posts */
.vx-related { margin-top: calc(134 * var(--u)); text-align: center; }
.vx-related .vx-h2 { margin-top: calc(22 * var(--u)); }
.vx-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(21 * var(--u)); margin-top: calc(50 * var(--u)); text-align: left; }
.vx-card { display: flex; flex-direction: column; min-height: calc(534 * var(--u)); padding: calc(10 * var(--u)); border-radius: calc(30 * var(--u)); background: var(--vx-card); color: var(--vx-ink); transition: transform .25s; }
.vx-card:hover { transform: translateY(-4px); }
.vx-card__media { display: block; height: calc(376 * var(--u)); border-radius: calc(20 * var(--u)); overflow: hidden; background: #d8dcec; }
.vx-card__media img { width: 100%; height: 100%; object-fit: cover; }
.vx-card__meta { display: flex; align-items: center; justify-content: space-between; margin: calc(18 * var(--u)) calc(10 * var(--u)) 0 calc(18 * var(--u)); }
.vx-card__meta em { color: var(--vx-blue); font-size: calc(16 * var(--u)); letter-spacing: -0.05em; }
.vx-card__time { padding: calc(7 * var(--u)) calc(15 * var(--u)); border-radius: calc(100 * var(--u)); background: var(--vx-blue); color: #fff; font-size: calc(16 * var(--u)); line-height: 1; letter-spacing: -0.05em; }
.vx-card__title { margin: calc(20 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u)); font-family: var(--vx-font-head); font-weight: 600; font-size: calc(20 * var(--u)); line-height: 1; letter-spacing: -0.05em; }
/* Figma shows the middle card highlighted: that is the hover / focus state of every card. */
.vx-card { position: relative; isolation: isolate; overflow: hidden; transition: transform .35s cubic-bezier(.2, .7, .2, 1), color .35s, box-shadow .35s; }
.vx-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(152deg, #2b499f 53.8%, #cbc82b 139%); opacity: 0; transition: opacity .35s; }
.vx-card:hover, .vx-card:focus-visible { color: #fbfbff; transform: translateY(calc(-6 * var(--u))); box-shadow: 0 calc(24 * var(--u)) calc(50 * var(--u)) rgba(43, 73, 159, .22); }
.vx-card:hover::before, .vx-card:focus-visible::before { opacity: 1; }
.vx-card__meta em, .vx-card__time { transition: color .35s, background-color .35s; }
.vx-card:hover .vx-card__meta em, .vx-card:focus-visible .vx-card__meta em { color: #fff; }
.vx-card:hover .vx-card__time, .vx-card:focus-visible .vx-card__time { background: #f1f5ff; color: var(--vx-ink); }
.vx-card__media img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.vx-card:hover .vx-card__media img { transform: scale(1.05); }

/* Author */
.vx-author { position: relative; margin-top: calc(59 * var(--u)); margin-bottom: calc(242 * var(--u)); min-height: calc(380 * var(--u)); padding: calc(90 * var(--u)) calc(40 * var(--u)) calc(120 * var(--u)); border: calc(5 * var(--u)) solid #fff; border-radius: calc(50 * var(--u)); background: linear-gradient(0deg, #cbc82b -25%, var(--vx-bg) 62%); text-align: center; }
.vx-author__bio { max-width: calc(946 * var(--u)); margin-inline: auto; color: var(--vx-ink); font-size: calc(35 * var(--u)); line-height: calc(46 / 35); letter-spacing: -0.05em; }
.vx-author__card { position: absolute; left: 50%; bottom: calc(-86 * var(--u)); display: flex; align-items: center; gap: calc(54 * var(--u)); width: calc(772 * var(--u)); height: calc(178 * var(--u)); padding: 0 calc(20 * var(--u)); transform: translateX(-50%); border-radius: calc(30 * var(--u)); background: linear-gradient(151deg, #2b499f 39%, #cbc82b 129%); box-shadow: calc(20 * var(--u)) calc(24 * var(--u)) calc(44 * var(--u)) rgba(0, 0, 0, .25); color: #fff; text-align: left; }
.vx-author__photo { flex: none; width: calc(118.7 * var(--u)); height: calc(147 * var(--u)); border-radius: calc(20 * var(--u)); overflow: hidden; background: linear-gradient(1.7deg, #cbc82b 24%, #fff 70%); }
.vx-author__photo img { width: 100%; height: 100%; object-fit: cover; }
.vx-author__info { display: grid; gap: calc(8 * var(--u)); }
.vx-author__role { color: #f2f5ff; font-family: var(--vx-font-head); font-weight: 600; font-size: calc(16 * var(--u)); letter-spacing: -0.05em; }
.vx-author__name { font-size: calc(30 * var(--u)); line-height: 1.1; letter-spacing: -0.05em; }
.vx-author__links { display: flex; gap: calc(9 * var(--u)); margin-top: calc(6 * var(--u)); }
.vx-author__links a { display: flex; align-items: center; gap: calc(8 * var(--u)); height: calc(36.5 * var(--u)); padding: 0 calc(15.3 * var(--u)); border-radius: calc(100 * var(--u)); background: #fff; color: var(--vx-ink); font-family: var(--vx-font-head); font-weight: 600; font-size: calc(14.6 * var(--u)); letter-spacing: -0.05em; }
.vx-author__links img { width: calc(22 * var(--u)); height: auto; }

@media (max-width: 1099.98px) {
	.vx-hero--post .vx-hero__content { padding: calc(116 * var(--u)) calc(31 * var(--u)) calc(24 * var(--u)); }
	.vx-hero--post .vx-hero__heading { line-height: 1; }
	.vx-hero__media { position: relative; left: auto; top: auto; width: auto; height: calc(240 * var(--u)); margin: 0 calc(20 * var(--u)) calc(24 * var(--u)); border-radius: calc(30 * var(--u)); }

	.vx-post__meta { display: grid; grid-template-columns: 1fr 1fr; gap: calc(22 * var(--u)) calc(10 * var(--u)); margin-top: calc(28 * var(--u)); padding: 0 calc(10 * var(--u)) calc(24 * var(--u)); }
	.vx-post__meta li { gap: calc(10 * var(--u)); }
	.vx-post__meta li > span:last-child { font-size: calc(14 * var(--u)); }
	.vx-post__meta strong { font-size: calc(16 * var(--u)); }
	.vx-post__meta-author { margin-top: 0; }
	.vx-post__avatar { width: calc(40 * var(--u)); height: calc(41 * var(--u)); }

	.vx-post__layout { grid-template-columns: minmax(0, 1fr); margin-top: calc(30 * var(--u)); }
	.vx-post__side { display: none; }

	.vx-article { padding: calc(26 * var(--u)) calc(18 * var(--u)) calc(30 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(21 / 14); letter-spacing: -0.03em; }
	.vx-article > * { margin-top: calc(14 * var(--u)); }
	.vx-article > h2 { margin-top: calc(34 * var(--u)); font-size: calc(22 * var(--u)); }
	.vx-article h3 { font-size: calc(20 * var(--u)); }
	.vx-article .is-style-vx-lead { font-size: calc(15 * var(--u)); }
	.vx-article .is-style-vx-highlight { padding: calc(10 * var(--u)) calc(14 * var(--u)); border-radius: calc(14 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.3; }
	.vx-article .is-style-vx-framed, .vx-article .wp-block-image.is-style-vx-framed { padding: calc(8 * var(--u)); border-radius: calc(20 * var(--u)); }
	.vx-article img { border-radius: calc(14 * var(--u)); }
	.vx-article blockquote { min-height: 0; margin-top: calc(24 * var(--u)); padding: calc(84 * var(--u)) calc(20 * var(--u)) calc(30 * var(--u)); }
	.vx-article blockquote::before { top: calc(22 * var(--u)); width: calc(44 * var(--u)); height: calc(44 * var(--u)); font-size: calc(34 * var(--u)); padding-top: calc(11 * var(--u)); }
	.vx-article blockquote p { font-size: calc(20 * var(--u)); line-height: 1.1; }
	.vx-article .is-style-vx-box, .vx-article .is-style-vx-box-lime { margin-top: calc(24 * var(--u)); padding: calc(24 * var(--u)) calc(18 * var(--u)); border-radius: calc(20 * var(--u)); }
	.vx-article .is-style-vx-box h2, .vx-article .is-style-vx-box-lime h2 { font-size: calc(22 * var(--u)); }
	.vx-article .wp-block-columns { grid-template-columns: minmax(0, 1fr); gap: calc(12 * var(--u)); }
	.vx-article .wp-block-column > * + * { margin-top: calc(12 * var(--u)); }
	.vx-article .is-style-vx-number-card { min-height: 0; padding: calc(28 * var(--u)) calc(22 * var(--u)) calc(24 * var(--u)); border-radius: calc(20 * var(--u)); }
	.vx-article .is-style-vx-number-card .wp-block-group__inner-container > p:first-child { font-size: calc(24 * var(--u)); }
	.vx-article .is-style-vx-number-card .wp-block-group__inner-container > p:last-child { font-size: calc(13 * var(--u)); }
	.vx-article .is-style-vx-checklist { gap: calc(16 * var(--u)); }
	.vx-article .is-style-vx-checklist li { padding-left: calc(34 * var(--u)); background-size: calc(22 * var(--u)); }

	.vx-related { margin-top: calc(64 * var(--u)); }
	.vx-related .vx-h2 { margin-top: calc(14 * var(--u)); }
	.vx-related__grid { grid-template-columns: minmax(0, 1fr); gap: calc(16 * var(--u)); margin-top: calc(28 * var(--u)); }
	.vx-card { min-height: 0; border-radius: calc(24 * var(--u)); }
	.vx-card__media { height: calc(270 * var(--u)); border-radius: calc(16 * var(--u)); }
	.vx-card__meta em, .vx-card__time { font-size: calc(13 * var(--u)); }
	.vx-card__title { font-size: calc(17 * var(--u)); line-height: 1.1; }

	.vx-author { margin-top: calc(40 * var(--u)); margin-bottom: calc(150 * var(--u)); min-height: 0; padding: calc(36 * var(--u)) calc(16 * var(--u)) calc(110 * var(--u)); border-width: calc(3 * var(--u)); border-radius: calc(30 * var(--u)); }
	.vx-author__bio { max-width: calc(320 * var(--u)); font-size: calc(20 * var(--u)); line-height: calc(25 / 20); }
	.vx-author__card { bottom: calc(-70 * var(--u)); gap: calc(14 * var(--u)); width: calc(340 * var(--u)); height: auto; padding: calc(12 * var(--u)); border-radius: calc(22 * var(--u)); }
	.vx-author__photo { width: calc(84 * var(--u)); height: calc(104 * var(--u)); border-radius: calc(14 * var(--u)); }
	.vx-author__info { gap: calc(4 * var(--u)); }
	.vx-author__role { font-size: calc(12 * var(--u)); }
	.vx-author__name { font-size: calc(22 * var(--u)); }
	.vx-author__links { flex-wrap: wrap; gap: calc(5 * var(--u)); }
	.vx-author__links a { gap: calc(5 * var(--u)); height: calc(26 * var(--u)); padding: 0 calc(9 * var(--u)); font-size: calc(10.5 * var(--u)); }
	.vx-author__links img { width: calc(14 * var(--u)); }
}
/* Program banner under the blog article (parts/blog-banner.php) */
.vx-banner { margin-top: calc(90 * var(--u)); }
.vx-banner__card { position: relative; width: calc(1443 * var(--u)); height: calc(496 * var(--u)); margin-inline: auto; border-radius: calc(50 * var(--u)); overflow: hidden; background: var(--vx-black) url("../img/blog-banner.webp") center / cover no-repeat; color: #fff; }
.vx-banner__copy { position: absolute; left: calc(125 * var(--u)); top: calc(91 * var(--u)); display: flex; flex-direction: column; align-items: flex-start; }
.vx-banner__heading { max-width: calc(600 * var(--u)); font-family: var(--vx-font-head); font-weight: 600; font-size: calc(60 * var(--u)); line-height: calc(59 / 60); letter-spacing: -0.05em; }
.vx-banner__text { max-width: calc(629 * var(--u)); margin-top: calc(12 * var(--u)); color: rgba(255, 255, 255, .7); font-size: calc(25 * var(--u)); line-height: 1.4; letter-spacing: -0.05em; }
.vx-banner__copy .vx-btn { margin-top: calc(20 * var(--u)); }

.vx-banner__visual { position: absolute; left: calc(888 * var(--u)); top: calc(57 * var(--u)); width: calc(424 * var(--u)); height: calc(424 * var(--u)); }
.vx-banner__visual > * { position: absolute; }
.vx-banner__wave { left: 50%; top: 50%; width: calc(336 * var(--u)); height: calc(280 * var(--u)); max-width: none; transform: translate(-50%, -50%); }
.vx-banner__ring { left: 50%; top: 50%; width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); border: 1px solid rgba(43, 73, 159, .1); border-radius: 50%; }
.vx-banner__ring--1 { --d: calc(424 * var(--u)); }
.vx-banner__ring--2 { --d: calc(335.9 * var(--u)); }
.vx-banner__ring--3 { --d: calc(240.4 * var(--u)); border-color: rgba(43, 73, 159, .2); }
.vx-banner__photo { overflow: hidden; background: linear-gradient(1.7deg, #2b499f 24%, #fff 70%); }
.vx-banner__photo img { width: 100%; height: 100%; object-fit: cover; }
.vx-banner__photo--0 { left: calc(159.5 * var(--u)); top: calc(137 * var(--u)); width: calc(106.6 * var(--u)); height: calc(132 * var(--u)); border-radius: calc(22 * var(--u)); background: linear-gradient(1.7deg, #cbc82b 24%, #fff 70%); }
.vx-banner__photo--1 { left: calc(115 * var(--u)); top: calc(153 * var(--u)); width: calc(81.3 * var(--u)); height: calc(100.7 * var(--u)); border-radius: calc(14.8 * var(--u)); opacity: .5; }
.vx-banner__photo--2 { left: calc(229 * var(--u)); top: calc(160 * var(--u)); width: calc(82.8 * var(--u)); height: calc(91 * var(--u)); border-radius: calc(14.8 * var(--u)); opacity: .5; }
.vx-banner__zoom { left: calc(185 * var(--u)); top: calc(241 * var(--u)); width: calc(55.66 * var(--u)); height: calc(55.66 * var(--u)); }
.vx-banner__zoom img { position: absolute; inset: 0; width: 100%; height: 100%; }
.vx-banner__zoom img + img { inset: calc(15.8 * var(--u)); width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.vx-banner__badge { display: flex; align-items: center; height: calc(18.84 * var(--u)); padding: 0 calc(11.8 * var(--u)); border-radius: calc(100 * var(--u)); color: #fff; font-size: calc(14.13 * var(--u)); line-height: 1; letter-spacing: -0.05em; white-space: nowrap; filter: drop-shadow(0 calc(4.7 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, .25)); }
.vx-banner__badge--1 { left: calc(54 * var(--u)); top: calc(21 * var(--u)); background: #8092c5; }
.vx-banner__badge--2 { left: calc(8 * var(--u)); top: calc(262.6 * var(--u)); background: var(--vx-lime); color: #000; }
.vx-banner__badge--3 { left: calc(306 * var(--u)); top: calc(88.3 * var(--u)); background: var(--vx-blue); }

@media (max-width: 1099.98px) {
	.vx-banner { margin-top: calc(40 * var(--u)); }
	.vx-banner__card { width: calc(362 * var(--u)); height: auto; padding: calc(40 * var(--u)) calc(27 * var(--u)) calc(20 * var(--u)); border-radius: calc(30 * var(--u)); background-position: right bottom; }
	.vx-banner__copy { position: static; }
	.vx-banner__heading { font-size: calc(30 * var(--u)); line-height: 1; }
	.vx-banner__text { margin-top: calc(12 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(20 / 12); }
	.vx-banner__copy .vx-btn { margin-top: calc(16 * var(--u)); }
	.vx-banner__visual { position: relative; left: 50%; top: auto; margin: calc(10 * var(--u)) 0 calc(-110 * var(--u)) calc(-212 * var(--u)); transform: scale(.7); transform-origin: top center; }
}

/* Blog listing (index.php): related-post cards, 3 per row */
.vx-bloglist { margin-top: calc(100 * var(--u)); }
.vx-bloglist__grid { margin-top: 0; gap: calc(30 * var(--u)) calc(21 * var(--u)); }
.vx-bloglist__empty { padding: calc(60 * var(--u)) 0; text-align: center; font-size: calc(25 * var(--u)); color: var(--vx-grey); }

.vx-pagination { margin-top: calc(70 * var(--u)); }
.vx-pagination .nav-links { display: flex; justify-content: center; align-items: center; gap: calc(10 * var(--u)); }
.vx-pagination .page-numbers { display: grid; place-items: center; min-width: calc(54 * var(--u)); height: calc(54 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: calc(20 * var(--u)); background: #fff; color: #000; font-family: var(--vx-font-head); font-weight: 600; font-size: calc(18 * var(--u)); letter-spacing: -0.05em; transition: background-color .2s; }
.vx-pagination a.page-numbers:hover { background: var(--vx-card); }
.vx-pagination .page-numbers.current { background: var(--vx-gradient); color: #fff; }
.vx-pagination .page-numbers.dots { background: none; min-width: 0; }

@media (max-width: 1099.98px) {
	.vx-bloglist { margin-top: calc(40 * var(--u)); }
	.vx-bloglist__grid { gap: calc(16 * var(--u)); }
							.vx-pagination { margin-top: calc(36 * var(--u)); }
	.vx-pagination .nav-links { gap: calc(6 * var(--u)); }
	.vx-pagination .page-numbers { min-width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: calc(12 * var(--u)); font-size: calc(13 * var(--u)); }
}