/* «Дизайн 2» (au.jam.in.ua): свої доповнення до public/d2/css/site.css */
/* Завантаження — тонка смужка зверху, як на інших Nuxt-сайтах студії (13.11.2026) */
#au-loadbar { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 100500; pointer-events: none;
  background: linear-gradient(90deg, #056ab2, #4aa3e8 60%, #ffe4b5); box-shadow: 0 0 6px rgba(5,106,178,.5);
  animation: au-bar 2.4s cubic-bezier(.1,.6,.3,1) forwards; transition: opacity .35s ease .15s; }
#au-loadbar.done { width: 100% !important; animation: none; opacity: 0; transition: width .2s ease, opacity .35s ease .2s; }
#au-loadbar.go { animation: au-bar 2.4s cubic-bezier(.1,.6,.3,1) forwards; opacity: 1; }
@keyframes au-bar { 0% { width: 0 } 100% { width: 85% } }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Перемикач дизайну в меню */
.au-design { display: inline-flex; gap: 4px; padding: 4px; margin: 24px 0 8px; border: 1px solid #e4a230; border-radius: 999px; font-size: 14px; }
.au-design a, .au-design span { padding: 6px 14px; border-radius: 999px; line-height: 1.2; text-decoration: none; color: #222; }
.au-design .on { background: #e4a230; color: #fff; }
@media (hover: hover) { .au-design a:hover { background: rgba(228, 162, 48, .15); } }
/* Футер: знак Мінкульту, як на реєстрі */
footer .au-mk { display: flex; align-items: center; gap: 14px; color: #fff; font-size: 15px; line-height: 1.25; font-weight: 500; }
footer .au-mk img { width: 32px; height: 56px; flex: none; display: block; }
footer .au-mk i { display: block; width: 1px; height: 52px; background: rgba(255, 255, 255, .7); flex: none; }
footer a.google { text-decoration: none; color: inherit; }
/* Головна: текст про проєкт і FAQ */
.au2-seo { padding: 40px 0 80px; position: relative; }
.au2-text { max-width: 900px; margin: 0 auto 48px; font-size: 16px; line-height: 1.6; }
.au2-text h2 { font-size: 32px; margin-bottom: 20px; }
.au2-faq { max-width: 900px; margin: 0 auto; }
.au-faq-item { border-bottom: 1px solid rgba(228, 162, 48, .5); }
.au-faq-item summary { cursor: pointer; list-style: none; position: relative; padding: 18px 40px 18px 0; font-weight: 700; font-size: 18px; }
.au-faq-item summary::-webkit-details-marker { display: none; }
.au-faq-item summary::after { content: '+'; position: absolute; right: 8px; top: 12px; font-size: 28px; line-height: 1; color: #e4a230; transition: transform .2s; }
.au-faq-item[open] summary::after { transform: rotate(45deg); }
.au-faq-answer { padding: 0 0 18px; }
.main .gallery .foto-item img { width: 100%; object-fit: cover; }
/* Друга карусель робіт (артефакти) — ті самі відступи, що в .slick-art */
@media screen and (max-width: 991px) { .slick-carousel.slick-art2 { margin: 0 5px; } }
@media screen and (min-width: 992px) { section .slick-carousel.slick-art2 .card-item { padding: 0 11px; } }
/* Перемикач дизайнів — поза .menu-list (у неї z-index:-1, тож верхній рядок шапки перекривав кнопки) */
header > .au-design-d2 { position: fixed; right: 30px; bottom: 30px; margin: 0; background: #fff; z-index: 20; visibility: hidden; opacity: 0; transition: opacity .3s; }
header.active > .au-design-d2 { visibility: visible; opacity: 1; }
@media (max-width: 991px) { header > .au-design-d2 { right: auto; left: 20px; bottom: 24px; } }

/* Рік, автор і опис твору: одна лінія між рядками, а не дві */
section.work-page .page-box .desc-box p { margin: 0; }
section.work-page .page-box .desc-box p + p { border-top: 0; }
section.work-page .page-box .desc-box p:empty { display: none; }

/* ===== Гра «Знайди страву» на столі «Смаків» (13.11.2026) ===== */
.page-31:has(.food-btn:hover) .next-section { opacity: 0; pointer-events: none; }
.au-fg-start { position: absolute; z-index: 16; right: 16px; bottom: 34px; display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px 11px 14px; border: 0; border-radius: 40px; background: #ffe4b5; color: #046bb5; font: 15px/1.1 'MuseoSansBold', Arial, sans-serif;
  box-shadow: 0 6px 18px rgba(0,0,0,.28); cursor: pointer; animation: au-fg-pulse 2.4s ease-in-out infinite; }
.au-fg-ico { font-size: 18px; }
@keyframes au-fg-pulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.05) } }
body.au-fg-on { overflow: hidden; }
body.au-fg-on .food-img-interactive { background: linear-gradient(#0b4a1d, #1f6e2c 45%, #f1ede4 78%); }
body.au-fg-on .au-fg-start, body.au-fg-on .next-section, body.au-fg-on #menu-toggle, body.au-fg-on .share-fixed, body.au-fg-on .powered-by, body.au-fg-on .logo-inner { opacity: 0 !important; pointer-events: none; }
body.au-fg-on .food-container .food-btn:not(.au-fg-dish) { display: none; }
body.au-fg-on .food-btn > div { display: none !important; }
body.au-fg-on .food-container .food-btn.au-fg-dish:after { background-color: rgba(255,255,255,.55); border-radius: 100px; transform: scale(.9); }
body.au-fg-on .food-btn:hover:before { transform: none; }
.top-food-img { transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.food-btn.au-fg-ok:after { background-color: rgba(76,200,110,.95) !important; transform: scale(1.35) !important; }
.food-btn.au-fg-bad { animation: au-fg-shake .4s; }
.food-btn.au-fg-bad:after { background-color: rgba(230,60,60,.85) !important; transform: scale(1.2) !important; }
.food-btn.au-fg-show:after { background-color: rgba(255,228,181,1) !important; transform: scale(1.5) !important; animation: au-fg-blink .4s 3; }
@keyframes au-fg-shake { 0%,100% { translate: 0 } 25% { translate: -6px } 75% { translate: 6px } }
@keyframes au-fg-blink { 50% { opacity: .3 } }
.au-fg-hud { position: fixed; z-index: 3000; left: 10px; right: 10px; top: 10px; max-width: 520px; margin: 0 auto; padding: 10px 14px 12px;
  border-radius: 18px; background: rgba(4,107,181,.94); color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.3);
  transform: translateY(-140%); transition: transform .35s ease; }
.au-fg-hud.show { transform: none; }
.au-fg-row { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.au-fg-lives { color: #ffb3b3; letter-spacing: 2px; font-size: 15px; }
.au-fg-score { margin-left: auto; font-family: 'MuseoSansBold', Arial, sans-serif; }
.au-fg-x { border: 0; background: rgba(255,255,255,.18); color: #fff; width: 28px; height: 28px; border-radius: 50%; font-size: 13px; line-height: 28px; padding: 0; }
.au-fg-ask { margin: 6px 0 8px; font-size: 21px; line-height: 1.2; color: #ffe4b5; font-family: 'MuseoSansBold', Arial, sans-serif; }
.au-fg-ask small { font-size: 14px; color: #fff; font-family: inherit; opacity: .85; }
.au-fg-ask.pop { animation: au-fg-pop .35s ease; }
@keyframes au-fg-pop { 0% { transform: scale(.9); opacity: .3 } 100% { transform: none; opacity: 1 } }
.au-fg-bar { height: 6px; border-radius: 6px; background: rgba(255,255,255,.25); overflow: hidden; }
.au-fg-bar i { display: block; height: 100%; background: #ffe4b5; border-radius: 6px; transition: width .1s linear; }
.au-fg-bar i.low { background: #ff8a7a; }
.au-fg-toast { position: absolute; left: 50%; top: 100%; margin-top: 10px; transform: translate(-50%, -6px); opacity: 0; padding: 7px 16px; border-radius: 30px;
  background: #fff; color: #046bb5; font: 15px 'MuseoSansBold', Arial, sans-serif; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.25); transition: all .2s; pointer-events: none; }
.au-fg-toast.show { opacity: 1; transform: translate(-50%, 0); }
.au-fg-toast.good { background: #4cc86e; color: #fff; }
.au-fg-toast.bad { background: #e65050; color: #fff; }
.au-fg-panel { position: fixed; inset: 0; z-index: 3001; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(2,40,80,.45); opacity: 0; pointer-events: none; transition: opacity .25s; }
.au-fg-panel.show { opacity: 1; pointer-events: auto; }
.au-fg-card { width: 100%; max-width: 380px; max-height: 92vh; overflow: auto; padding: 22px 22px 16px; border-radius: 22px; background: #fff; color: #333; text-align: center; box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.au-fg-card h3 { color: #046bb5; font-size: 22px; margin: 4px 0 8px; }
.au-fg-card p { font-size: 15px; line-height: 1.45; margin: 0 0 10px; }
.au-fg-big { font-size: 42px; line-height: 1; }
.au-fg-total { font: 44px/1 'MuseoSansBold', Arial, sans-serif !important; color: #046bb5; margin: 6px 0 !important; }
.au-fg-best { color: #c47a00; }
.au-fg-sub { font-size: 13px !important; color: #777; margin-top: 6px !important; }
.au-fg-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 14px; }
.au-fg-list a { padding: 5px 11px; border-radius: 20px; background: #eef5fb; color: #046bb5; font-size: 13px; text-decoration: none; }
.au-fg-card .au-fg-go { display: block; width: 100%; margin: 6px 0 4px; }
.au-fg-link { border: 0; background: none; color: #046bb5; font-size: 14px; padding: 8px; text-decoration: underline; }
@media (max-width: 680px) {
  .au-fg-start { right: 12px; bottom: 30px; padding: 10px 14px 10px 12px; font-size: 14px; }
  .page-31 .next-section { left: 22px; margin-left: 0; }
}

/* Тест після статті спадщини (au-quiz.js) */
html.au-qz-lock, html.au-qz-lock body { overflow: hidden }
.au-qz { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(16, 61, 148, .55) }
.au-qz.show { display: flex }
.au-qz-card { position: relative; width: 100%; max-width: 620px; max-height: calc(100vh - 32px); overflow: auto; background: #fff8ea; border-radius: 28px; padding: 32px 32px 28px; color: #1d2b4f; box-shadow: 0 20px 60px rgba(0, 0, 0, .25) }
.au-qz-x { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #ffe4b5; color: #103d94; font-size: 16px; cursor: pointer }
.au-qz-step { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #056ab2 }
.au-qz-bar { height: 6px; border-radius: 3px; background: #f2cfa4; overflow: hidden; margin: 0 48px 20px 0 }
.au-qz-bar i { display: block; height: 100%; background: #056ab2; transition: width .3s }
.au-qz-q { margin: 0 0 18px; font-size: 22px; line-height: 1.3; font-weight: 700; color: #103d94 }
.au-qz-opts { display: grid; gap: 10px }
.au-qz-opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; border: 2px solid #f2cfa4; border-radius: 16px; background: #fff; color: #1d2b4f; font: inherit; font-size: 16px; line-height: 1.35; cursor: pointer }
.au-qz-opt b { flex: 0 0 30px; height: 30px; border-radius: 50%; background: #ffe4b5; color: #103d94; display: flex; align-items: center; justify-content: center; font-size: 14px }
.au-qz-opt:disabled { cursor: default }
.au-qz-opt.ok { border-color: #2e9d5b; background: #e8f6ec }
.au-qz-opt.ok b { background: #2e9d5b; color: #fff }
.au-qz-opt.bad { border-color: #d24b3e; background: #fbeae7 }
.au-qz-opt.bad b { background: #d24b3e; color: #fff }
.au-qz-fb p { margin: 16px 0 0; font-size: 16px }
.au-qz-fb p.ok { color: #2e7d4c; font-weight: 700 }
.au-qz-fb p.bad { color: #b23a2f }
.au-qz-fb p.bad b { color: #1d2b4f }
.au-qz-btn { display: inline-block; margin-top: 18px; padding: 13px 28px; border: 0; border-radius: 30px; background: #056ab2; color: #fff; font: inherit; font-weight: 700; font-size: 16px; cursor: pointer }
.au-qz-link { display: block; margin: 12px auto 0; border: 0; background: none; color: #056ab2; font: inherit; text-decoration: underline; cursor: pointer }
.au-qz-score { font-size: 72px; font-weight: 800; color: #103d94; line-height: 1; margin: 10px 0 }
.au-qz-score small { font-size: 32px; color: #8a7a60 }
.au-qz-g { font-size: 18px; margin: 0 }
.au-qz-body:has(.au-qz-score) { text-align: center }
@media (hover: hover) {
  .au-qz-opt:not(:disabled):hover { border-color: #056ab2 }
  .au-qz-btn:hover { background: #046bb5 }
}
@media (max-width: 680px) {
  .au-qz { padding: 0; align-items: flex-end }
  .au-qz-card { max-width: none; border-radius: 24px 24px 0 0; padding: 24px 18px calc(20px + env(safe-area-inset-bottom)); max-height: 92vh }
  .au-qz-q { font-size: 19px }
  .au-qz-opt { font-size: 15px; padding: 11px 12px }
  .au-qz-btn { width: 100% }
}

/* Картини й предмети (13.11.2026): не зберегти правою кнопкою, не перетягнути, водяний знак на сторінці картини */
.exhibit-thmb img, figure.zoom img, .au-art-grid img, .au-ah img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; pointer-events: none; }
.exhibit-thmb .exhibit-thmb-wrap { position: relative; }
figure.zoom { position: relative; -webkit-touch-callout: none; user-select: none; }
figure.zoom:after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 4; opacity: .28;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200'%3E%3Ctext x='150' y='105' fill='white' stroke='rgba(0,0,0,.35)' stroke-width='.6' font-family='Arial,sans-serif' font-size='20' font-weight='700' text-anchor='middle' transform='rotate(-28 150 100)'%3E© Автентична Україна%3C/text%3E%3C/svg%3E");
  background-repeat: repeat; background-size: 300px 200px; }


/* Списки розділів у дизайні 2 (13.11.2026): поля фільтра, регіони страв, порожній список */
.au2-filter .form-filter-col { margin-bottom: 18px; }
.au2-filter .filter-label { font-size: 14px; margin-bottom: 6px; color: #6b6b6b; }
.au2-select { width: 100%; height: 48px; border: 1px solid #e4a230; border-radius: 16px; padding: 0 40px 0 14px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e4a230' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center; -webkit-appearance: none; appearance: none; font-size: 15px; color: #222; }
.au2-select:focus { outline: 2px solid #e4a230; outline-offset: 1px; }
.filter-tags .tag { display: inline-block; margin: 0 8px 8px 0; padding: 8px 14px; border: 1px solid #e4a230; border-radius: 16px; color: #222; font-size: 14px; text-decoration: none; }
.filter-tags .tag.active { background: #e4a230; color: #fff; }
.au2-regions { margin-bottom: 10px; }
.au2-empty { padding: 40px 0; font-size: 18px; color: #6b6b6b; }
.au-d2 .pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 30px 0 10px; padding: 0; list-style: none; }
.au-d2 .pagination li a, .au-d2 .pagination li span { display: flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 10px; border: 1px solid #e4a230; border-radius: 50%; color: #222; text-decoration: none; }
.au-d2 .pagination li.active a { background: #e4a230; color: #fff; }
.au-d2 .pagination li.disabled span { opacity: .35; }
@media (hover: hover) { .filter-tags a.tag:hover, .au-d2 .pagination li a:hover { background: #fdf3e2; } }

/* Телефон: «Фільтр» — кнопка внизу екрана, фільтр — панель знизу (як у застосунках) */
@media (max-width: 991.98px) {
  .au-d2 .filters-container { height: auto !important; }
  .au-d2 .filter-works.hide { display: block !important; }
  .au-d2 .filters-container > .row > .filter-works:first-child { position: fixed; left: 0; right: 0; bottom: 16px; z-index: 40; display: flex !important; justify-content: center; pointer-events: none; }
  .au-d2 .filters-container > .row > .filter-works:first-child .filter-btn { pointer-events: auto; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); background: #e4a230; color: #fff; border-radius: 24px; padding: 12px 22px; display: inline-flex; gap: 8px; align-items: center; }
  .au-d2 .filters-container > .row > .filter-works:first-child .filter-btn path { fill: #fff; }
  .au-d2 .filters-box { position: fixed !important; top: auto !important; left: 0; right: 0; bottom: 0; height: auto !important; width: 100%; max-width: none; margin: 0; z-index: 60; max-height: 80vh; overflow: auto; background: #fff; border-radius: 22px 22px 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, .2); padding: 18px 20px 28px; transform: translateY(105%); transition: transform .28s ease; display: block !important; }
  .au-d2 .filters-box.show { transform: none; }
  .au-d2 .filters-box .section-title { display: flex; justify-content: space-between; align-items: center; }
  .au-d2 .filters-box .section-title h2 { font-size: 22px; margin: 0; }
}

/* Тур у дизайні 2: панорама в рамці сторінки, перелік панорам, карта (як у дизайні 1) */
.street-view .au-pano { width: 100%; height: 100vh; height: 100dvh; min-height: 420px; background: #0d2a4a; }
.street-view .au-pano .pnlm-load-box { background: rgba(5, 106, 178, .8); border-radius: 14px; }
.street-view .au-pano .pnlm-controls-container { top: auto; bottom: 72px; left: auto; right: 16px; }
.au-pano-hint { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 3; pointer-events: none; padding: 10px 18px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 15px; white-space: nowrap; transition: opacity .4s; }
.au-pano-hint.off { opacity: 0; }
.au-pano .pnlm-hotspot-base.au-arrow { width: 84px; height: 64px; margin: -32px 0 0 -42px; background: none; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; perspective: 220px; }
.au-pano .pnlm-hotspot-base.au-arrow svg { width: 72px; height: 54px; display: block; flex: none; transform: rotateX(42deg); filter: drop-shadow(0 3px 3px rgba(0,0,0,.45)); transition: transform .15s; }
.au-pano .pnlm-hotspot-base.au-arrow span { display: none; }
@media (hover: hover) { .au-pano .pnlm-hotspot-base.au-arrow:hover svg { transform: rotateX(42deg) scale(1.15); } }
.au-tour-strip { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; display: flex; gap: 8px; padding: 10px 84px 12px; overflow-x: auto; background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0)); scrollbar-width: thin; }
.au-tour-tile { flex: none; width: 128px; padding: 0; border: 2px solid transparent; border-radius: 10px; background: rgba(0,0,0,.4); color: #fff; cursor: pointer; overflow: hidden; text-align: left; }
.au-tour-tile img { display: block; width: 100%; height: 64px; object-fit: cover; }
.au-tour-tile span { display: block; padding: 4px 7px 5px; font-size: 12px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.au-tour-tile:first-child { margin-left: auto; }
.au-tour-tile:last-child { margin-right: auto; }
.au-tour-tile.on { border-color: #ffc400; background: rgba(5,106,178,.9); }
.au-has-strip .au-pano-hint { bottom: 136px; }
.au-tour-map { position: absolute; z-index: 5; top: 84px; right: 16px; width: 250px; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.au-tour-map-in { height: 180px; }
.au-tour-map.closed .au-tour-map-in { display: none; }
.au-tour-map-tog { display: none; width: 100%; padding: 8px 12px; border: 0; background: #fff; color: #056ab2; font-weight: 600; font-size: 14px; cursor: pointer; }
.au-tour-map .leaflet-control-attribution { font-size: 9px; }
.au-tour-full { position: absolute; z-index: 5; right: 16px; width: 40px; height: 40px; border: 0; border-radius: 10px; background: rgba(0,0,0,.55); cursor: pointer; display: flex; align-items: center; justify-content: center; bottom: 24px; }
.au-has-strip .au-tour-full { bottom: 140px; }
.au-tour-full svg { width: 22px; height: 22px; }
.au-has-strip .au-pano .pnlm-controls-container { bottom: 188px; }
.street-view:fullscreen, .street-view.au-fs { background: #000; }
.street-view:fullscreen .au-pano, .street-view.au-fs .au-pano { height: 100vh; height: 100dvh; }
.street-view.au-fs { position: fixed; inset: 0; z-index: 2000; }
.au2-pano .street-view:not(:fullscreen):not(.au-fs) { border-radius: 20px; }
.au2-pano .street-view { position: relative; overflow: hidden; background: #0d2a4a; }
.au2-pano .street-view .au-pano { height: 72vh; height: 72dvh; min-height: 420px; }
.au2-pano .au-tour-map { top: 16px; }
.vr-box iframe { width: 100%; min-height: 450px; border-radius: 20px; }
.au2-prevnext { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 28px 0 8px; }
.au2-after { padding: 10px 0 60px; }
.au2-404 { min-height: 50vh; }
.place-page .image { position: relative; }
.place-page .image .place-vr-icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; }
@media (max-width: 767px) {
  .au2-pano .street-view .au-pano { height: 64vh; height: 64dvh; min-height: 360px; }
  .au2-pano .au-tour-map { top: 12px; right: 12px; width: 110px; }
  .au2-pano .au-tour-map:not(.closed) { width: 220px; }
  .au2-pano .au-tour-map-in { height: 150px; }
  .au2-pano .au-tour-map-tog { display: block; }
  .au2-pano .au-tour-strip { padding-left: 12px; padding-right: 12px; }
  .au2-pano .au-tour-tile { width: 104px; }
  .au2-pano .au-tour-tile img { height: 52px; }
  .au2-pano .au-has-strip .au-tour-full { bottom: 120px; }
  .au2-pano .au-has-strip .au-pano-hint { bottom: 122px; white-space: normal; text-align: center; max-width: 80%; }
}
.au-tour-tile span { color: #fff; }
.place-page .place-icon a { color: #e4a230; }
/* Роботи на сторінці музею: звичайна сітка (масонрі з лінивими фото накладало картки одна на одну) */
.au2-works { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; align-items: start; }
.au2-works .card-item { width: auto !important; position: static !important; margin: 0; }
.au2-works .thmb img { width: 100%; height: auto; display: block; }
@media (max-width: 1199px) { .au2-works { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .au2-works { grid-template-columns: 1fr 1fr; gap: 12px; } }