/* Pizza Chicago: charcoal, baked dough, cheese gold and tomato. */
@font-face {
  font-family: 'Oswald'; src: url("./fonts/Oswald.ffe9883ec811.ttf") format('truetype');
  font-style: normal; font-weight: 200 700; font-display: swap;
}
@font-face {
  font-family: 'Manrope'; src: url("./fonts/Manrope.946beb949095.ttf") format('truetype');
  font-style: normal; font-weight: 200 800; font-display: swap;
}
:root {
  --paper: #eed8b5;
  --ink: #24251f;
  --muted: #655441;
  --accent: #b63722;
  --accent-hover: #902917;
  --line: #cfb88f;
  --tint: #e9bf7e;
  --coal: #20251f;
  --gold: #efb548;
  --cream: #f8ebd1;
  --surface: #f4e4c8;
  --radius: 12px;
  --font-body: 'Manrope', sans-serif;
  --font-display: 'Oswald', sans-serif;
}
body { background: var(--paper); font-family: var(--font-body); font-weight: 500; }
button, input, textarea, select { font-family: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: 0; }
.local-notice { background: #d4aa67; color: #3b2c18; font-size: 11px; font-weight: 600; padding-block: 7px; }
.brand-masthead, .footer-band { background: var(--coal); color: var(--cream); }
.site-header { min-height: 104px; border-color: #485043; gap: 30px; }
.brand img { width: 58px; height: 58px; padding: 5px; background: var(--cream); border-radius: 50%; }
.brand>span { font-family: var(--font-display); font-size: 29px; letter-spacing: .02em; font-weight: 650; line-height: 1.05; }
.brand small { color: var(--gold); font-size: 11px; letter-spacing: .48em; line-height: 1.6; }
.location-button { color: #e5d7bc; font-size: 13px; max-width: 260px; }
.location-button>svg:first-child { color: var(--gold); }
.header-nav { font-size: 14px; font-weight: 600; gap: 27px; }
.header-nav .active { color: var(--gold); }
.header-nav .active:after { background: var(--gold); }
.header-nav button:hover { color: var(--gold); }
.button { background: var(--accent); border-radius: 7px; font-weight: 750; }
.cart-button { background: var(--gold); color: var(--coal); min-height: 48px; }
.cart-button:hover { background: #ffca68; }
.cart-counter { border-color: #826326; }
.intro { grid-template-columns: 1fr 1.12fr; gap: 48px; padding: 34px 0 40px; }
.intro h1 { color: var(--cream); font-size: clamp(48px,5.1vw,72px); font-weight: 600; letter-spacing: -.015em; line-height: 1.04; text-transform: uppercase; }
.intro h1 span { color: var(--gold); }
.intro>div>p { color: #e5d7bc; font-size: 19px; letter-spacing: .01em; margin-top: 16px; }
.halves-banner { height: 188px; background: var(--gold); color: var(--coal); border-radius: 12px; gap: 15px; padding-right: 28px; }
.halves-banner .split-pizza { width: 253px; height: 253px; transform: translate(-15px,26px); }
.halves-banner .split-pizza img { width: 253px; height: 253px; }
.halves-banner:hover .split-pizza { transform: translate(-15px,20px) rotate(-4deg); }
.halves-banner-copy { gap: 16px; }
.halves-banner strong { font-family: var(--font-display); font-size: 32px; line-height: 1.06; font-weight: 600; letter-spacing: 0; text-transform: uppercase; }
.outline-label { font-size: 13px; font-weight: 800; color: var(--coal); border-color: #806325; }
.catalog-toolbar { padding-top: 13px; margin-bottom: 22px; border-color: #bba17b; }
.category-tabs { gap: 34px; }
.category-tabs button { font-family: var(--font-display); font-size: 27px; text-transform: uppercase; font-weight: 500; color: #766146; padding: 18px 2px 16px; }
.category-tabs button.active { color: var(--accent); border-bottom-width: 3px; }
.segmented { background: #d9c198; }
.segmented button { color: #51412d; font-weight: 700; }
.segmented button.active { background: var(--coal); color: var(--cream); }
.product-grid { column-gap: 45px; row-gap: 45px; }
.product h2 { font-size: 29px; line-height: 1.15; letter-spacing: 0; font-weight: 550; margin: 12px 0 10px; }
.product .description { color: #5e4c38; font-size: 14px; line-height: 1.55; max-width: 36ch; }
.price { font-family: var(--font-display); font-size: 27px; font-weight: 550; letter-spacing: 0; }
.choose-button { background: var(--accent); color: #fff8ee; font-size: 14px; font-weight: 750; border-radius: 7px; min-height: 44px; }
.choose-button:hover { background: var(--accent-hover); }
.spicy-mark { font-family: var(--font-body); font-size: 10px; background: #eac199; padding: 4px 6px; border-radius: 4px; }
.service-note { border-color: #baa078; margin-top: 64px; padding: 35px 0 44px; }
.service-note h2 { font-size: 37px; line-height: 1.15; text-transform: uppercase; letter-spacing: 0; }
.service-note p { color: #5e4c38; }
.text-button { color: var(--accent); font-weight: 800; }
.footer { border: 0; padding-top: 33px; padding-bottom: 35px; }
.footer .brand>span { font-size: 26px; }
.footer p, .footer>div a { color: #d7c9af; }
.footer>div button:hover, .footer>div a:hover { color: var(--gold); }
.dialog { background: var(--surface); --line: #d5bc94; border-radius: 14px; }
.dialog::backdrop { background: #141b14bf; }
.close-button { background: #dec8a3; }
.close-button:hover { background: #ccb18b; }
.detail-copy h2 { font-size: 36px; font-weight: 550; letter-spacing: 0; }
.detail-copy>p { color: #5e4c38; font-size: 15px; line-height: 1.65; }
.size-picker button { background: #ead6b4; border-color: #b69b73; font-weight: 700; }
.size-picker button.active { background: var(--coal); border-color: var(--coal); color: var(--cream); }
.halves-select select, .checkout-form input, .checkout-form textarea, .checkout-form select,
.operator-fields input, .operator-fields select { background: #fff6e4; border-color: #a88d67; font-size: 16px; }
.halves-builder { grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: 28px; }
.halves-builder .detail-copy { min-width: 0; }
.halves-builder .detail-copy>p { margin: 12px 0 20px; }
.halves-builder .halves-visual { width: 100%; max-width: 370px; }
.preview-half { border: 0; padding: 0; background: none; transition: transform 260ms var(--ease); }
.preview-half img { top: 0; }
.preview-half.split-left img { left: 0; }
.preview-half.split-left { border-radius: 100% 0 0 100% / 50% 0 0 50%; }
.preview-half.split-right { border-radius: 0 100% 100% 0 / 0 50% 50% 0; }
.preview-half.split-left[aria-pressed="true"] { transform: translateX(-6px); }
.preview-half.split-right[aria-pressed="true"] { transform: translateX(6px); }
.preview-half:focus-visible { outline-offset: -4px; }
.half-sides { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.half-side { position: relative; border: 1px solid #b69b73; border-radius: 8px; background: #ead6b4; color: var(--ink); text-align: left; padding: 10px 12px; min-height: 73px; transition: background 180ms, color 180ms, border-color 180ms; }
.half-side>span { display: block; font-size: 11px; line-height: 1.4; margin-bottom: 4px; }
.half-side strong { display: block; font-size: 14px; line-height: 1.4; }
.half-side[aria-pressed="true"] { background: var(--coal); color: var(--cream); border-color: var(--coal); }
.half-side[aria-pressed="true"]>span { color: var(--gold); }
.half-side[aria-pressed="true"]::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: -2px; height: 3px; background: var(--gold); }
.flavor-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 13px 0 4px; }
.flavor-heading>span { font-size: 12px; font-weight: 650; }
.flavor-arrows { display: flex; gap: 2px; }
.flavor-arrows button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid #b69b73; border-radius: 50%; background: transparent; color: var(--ink); }
.flavor-arrows button:disabled { opacity: .4; }
.flavor-arrows svg { width: 17px; height: 17px; }
.flavor-arrows button:last-child svg { transform: rotate(180deg); }
.flavor-list { position: relative; display: flex; overflow-x: auto; gap: 8px; padding: 4px 3px 10px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #a6885c transparent; }
.flavor-card { position: relative; flex: 0 0 calc((100% - 16px)/3); display: flex; flex-direction: column; align-items: center; gap: 6px; border: 1px solid transparent; border-radius: 8px; padding: 5px 3px 7px; background: transparent; color: var(--ink); scroll-snap-align: start; font-size: 12px; font-weight: 650; line-height: 1.4; transition: background 180ms, border-color 180ms; }
.flavor-card img { width: 74px; height: 74px; max-width: 100%; object-fit: contain; transition: transform 220ms var(--ease); }
.flavor-card[aria-pressed="true"] { border-color: var(--accent); background: #eac89b; }
.flavor-card[aria-pressed="true"]::after { content: '✓'; position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--accent); color: #fff8ee; font-size: 12px; }
.flavor-card:disabled { opacity: .5; cursor: not-allowed; }
.flavor-card:disabled::after { content: '½'; position: absolute; top: 4px; right: 4px; font-size: 16px; }
.halves-builder .size-picker { margin: 15px 0 12px; }
.halves-builder .small-note { font-size: 11px; text-align: center; margin-top: 9px; }
.halves-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media(hover:hover) {
  .flavor-card:hover:not(:disabled) img { transform: translateY(-3px) rotate(-3deg); }
  .flavor-arrows button:hover:not(:disabled) { background: #e3c79f; }
}
@media(max-width:600px) {
  .halves-builder { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .halves-builder .halves-visual { width: 165px; max-width: 55%; }
  .halves-builder .detail-copy h2 { font-size: 28px; line-height: 1.2; }
  .halves-builder h2 br { display: none; }
  .halves-builder .detail-copy>p { font-size: 13px; margin: 8px 0 14px; }
  .half-side { min-height: 66px; padding: 8px 10px; }
  .half-side strong { font-size: 13px; }
  .flavor-heading { margin-top: 9px; }
  .flavor-card img { width: 65px; height: 65px; }
  .flavor-arrows button { width: 40px; height: 40px; }
}
.cart-location, .history-note { background: #e5cca2; color: #55422b; }
.quantity { background: #e0c8a0; }
.quantity button { width: 40px; height: 40px; }
.drawer { border-radius: 14px 0 0 14px; }
.drawer h2, .info-dialog h2 { font-size: 34px; letter-spacing: 0; }
.cart-line h3 { font-family: var(--font-body); font-size: 15px; line-height: 1.4; letter-spacing: 0; }
.branch-option h3, .history-item h3 { font-family: var(--font-body); font-size: 16px; line-height: 1.5; letter-spacing: 0; }
.summary-row.total { font-family: var(--font-body); font-size: 20px; }
.error { background: #f3c7aa; color: #742117; }
.button.secondary { background: transparent; color: var(--coal); border-color: #967d59; }
.button.secondary:hover { background: #e4caa1; }
.operator-order { background: var(--surface); }
.operator-header h1 { font-size: 40px; letter-spacing: 0; }
.operator-order h2 { font-size: 26px; }
.operator-order pre { background: #e6d0ad; }
.toast { background: var(--coal); color: var(--cream); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline-color: var(--accent); }
.brand-masthead :focus-visible, .footer-band :focus-visible { outline-color: var(--gold); }
::selection { background: var(--accent); color: #fff8ee; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: #a6885c; }
@media(max-width:1100px) {
  .site-header { gap: 20px; }.location-button { max-width: 220px; font-size: 12px; }
  .header-nav { gap: 20px; font-size: 13px; }.brand>span { font-size: 25px; }
  .intro { gap: 28px; }.intro h1 { font-size: 59px; }
  .halves-banner { height: 175px; gap: 8px; padding-right: 20px; }
  .halves-banner .split-pizza, .halves-banner .split-pizza img { width: 215px; height: 215px; }
  .halves-banner strong { font-size: 28px; }.product-grid { column-gap: 28px; }
}
@media(max-width:900px) {
  .site-header { min-height: 0; }.header-nav { border-color: #485043; }
  .location-button { max-width: none; }.brand img { width: 49px; height: 49px; }
  .intro { grid-template-columns: 1fr 1.15fr; gap: 20px; }
  .intro h1 { font-size: 53px; }.intro>div>p { font-size: 16px; }
  .halves-banner { gap: 2px; padding-right: 14px; height: 170px; }
  .halves-banner .split-pizza, .halves-banner .split-pizza img { width: 180px; height: 180px; }
  .halves-banner strong { font-size: 25px; }.outline-label { font-size: 11px; }
  .product h2 { font-size: 27px; }
}
@media(max-width:600px) {
  .local-notice { font-size: 10px; }.site-header { gap: 8px 12px; padding-top: 12px; }
  .brand img { width: 43px; height: 43px; padding: 4px; }.brand>span { font-size: 25px; }
  .brand small { font-size: 9px; }.cart-button { min-height: 42px; padding: 9px 12px; }
  .location-button { color: #e5d7bc; font-size: 12px; border-color: #485043; padding-block: 10px; }
  .header-nav { font-size: 12px; }.intro { display: block; padding: 20px 0 18px; }
  .intro h1 { font-size: clamp(32px,9.8vw,54px); line-height: 1.05; white-space: nowrap; }
  .intro h1 br { display: none; }
  .intro>div>p { font-size: 15px; margin-top: 8px; }
  .halves-banner { margin-top: 16px; height: 104px; width: 100%; gap: 20px; padding-right: 19px; }
  .halves-banner .split-pizza, .halves-banner .split-pizza img { width: 170px; height: 170px; }
  .halves-banner .split-pizza { transform: translate(-10px,17px); }
  .halves-banner strong { font-size: 22px; line-height: 1.1; }
  .halves-banner-copy { gap: 10px; }.outline-label { font-size: 11px; }
  .catalog-toolbar { padding-top: 4px; padding-bottom: 12px; margin-bottom: 16px; }
  .category-tabs { gap: 26px; }.category-tabs button { font-size: 24px; padding: 15px 0 12px; }
  .segmented { margin-left: 0; }.segmented button { padding-inline: 13px; }
  .product-grid { column-gap: 20px; row-gap: 30px; }
  .product h2 { font-size: 23px; margin-top: 10px; line-height: 1.17; }
  .product .description { font-size: 12px; line-height: 1.55; min-height: 56px; }
  .price { font-size: 24px; }.choose-button { min-height: 42px; font-size: 13px; }
  .service-note { margin-top: 40px; padding: 30px 0; }.service-note h2 { font-size: 31px; }
  .footer { padding-bottom: 95px; }.footer .brand>span { font-size: 23px; }
  .dialog { border-radius: 14px; }.product-dialog { border-radius: 16px 16px 0 0; }
  .detail-copy h2 { font-size: 31px; }.detail-copy>p { font-size: 14px; }
  .drawer { border-radius: 0; }.drawer h2, .info-dialog h2 { font-size: 31px; }
  .halves-select select { font-size: 14px; }
}
@media(max-width:370px) {
  .halves-banner { gap: 12px; padding-right: 12px; }
  .halves-banner .split-pizza, .halves-banner .split-pizza img { width: 150px; height: 150px; }
  .halves-banner strong { font-size: 22px; }.product-grid { column-gap: 14px; }
  .brand>span { font-size: 22px; }.cart-button { gap: 6px; padding-inline: 9px; }
}

/* Centered logo navigation and compact, touch-friendly catalog. */
.logo-header { position: relative; display: grid; place-items: center; height: 130px; max-width: 480px; transition: height 380ms var(--ease); }
.logo-toggle { position: absolute; z-index: 2; top: 50%; left: 50%; width: 84px; height: 84px; padding: 0; transform: translate(-50%,-58%); border: 0; border-radius: 50%; background: none; color: var(--cream); }
.logo-toggle>img { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--cream); border-radius: 50%; padding: 7px; transition: filter 320ms, transform 380ms var(--ease), opacity 250ms; }
.logo-close { display: grid; place-items: center; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; border: 1px solid #6e765f; border-radius: 50%; background: var(--coal); opacity: 0; transform: translate(-50%,-50%) scale(.5); transition: opacity 260ms, transform 380ms var(--ease); }
.logo-close svg { width: 20px; height: 20px; }
.logo-hint { position: absolute; bottom: 7px; font-size: 11px; color: #d6c9af; transition: opacity 160ms; }
.logo-menu { position: absolute; inset: 16px 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 52px; align-content: center; pointer-events: none; }
.logo-action { display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid #9d8048; border-radius: 10px; padding: 12px; min-height: 58px; background: var(--gold); color: var(--coal); font-size: 14px; font-weight: 750; line-height: 1.35; text-decoration: none; opacity: 0; filter: blur(8px); transform: translate(var(--from-x),var(--from-y)) scale(.35); transition: transform 440ms var(--ease), filter 380ms, opacity 240ms; }
.logo-action:nth-child(odd) { --from-x: 65%; }.logo-action:nth-child(even) { --from-x: -65%; }
.logo-action:nth-child(-n+2) { --from-y: 48%; }.logo-action:nth-child(n+3) { --from-y: -48%; }
.logo-action svg { width: 21px; height: 21px; flex-shrink: 0; }
.logo-action b { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding-inline: 4px; border-radius: 4px; background: var(--coal); color: var(--gold); font-size: 11px; }
.logo-header.is-expanded { height: 174px; }
.is-expanded .logo-toggle { width: 44px; height: 44px; transform: translate(-50%,-50%); }
.is-expanded .logo-toggle>img { opacity: 0; filter: blur(10px); transform: scale(1.65) rotate(12deg); }
.is-expanded .logo-close { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.is-expanded .logo-hint { opacity: 0; }
.is-expanded .logo-menu { pointer-events: auto; }
.is-expanded .logo-action { opacity: 1; filter: blur(0); transform: translate(0,0) scale(1); transition-delay: 70ms; }
.logo-action:hover { background: #ffca68; }
.logo-action:focus-visible { outline-color: var(--cream); outline-offset: 4px; }
.order-context { margin: -6px 0 16px; }
.order-context .location-button { display: flex; width: auto; max-width: 100%; color: var(--muted); border: 0; margin: 0; padding: 6px 0; min-height: 44px; font-size: 13px; }
.order-context .location-button svg { width: 18px; height: 18px; color: var(--accent); }
.order-context .chevron { margin-left: 3px; }
#menu { scroll-margin-top: 12px; }
.product-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 28px 26px; }
.product { min-width: 0; }
.product-image-button { display: block; width: 50%; min-width: 80px; max-width: 180px; margin: 0 auto; border-radius: 50%; }
.halves-banner .split-pizza { border-radius: 50%; overflow: hidden; }
.detail-photo { border-radius: 16px; }
.product h2 { font-size: 23px; line-height: 1.2; margin: 10px 0 7px; }
.product .description { min-height: 38px; max-width: none; margin-bottom: 12px; font-size: 12px; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.product-bottom { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; }
.product .price { font-size: 23px; }
.product .choose-button { padding: 10px 14px; min-height: 44px; width: auto; font-size: 13px; }
.product.drink { align-self: end; padding: 16px 0; }
.account-symbol { width: 52px; height: 52px; color: var(--accent); margin: 10px 0 20px; }
.account-symbol svg { width: 100%; height: 100%; }
.account-actions { display: grid; gap: 10px; margin-top: 24px; }
.account-actions button { min-height: 48px; }
.account-actions .button:disabled { background: #dcc69f; color: #66543d; opacity: 1; cursor: not-allowed; }
.career-result { border-top: 1px solid var(--line); padding-top: 24px; }
.career-result h3 { font-size: 25px; }
.career-result p { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 12px 0 22px; }
@media(max-width:900px) {
  .product-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px 20px; }
  .product h2 { font-size: 21px; }.product .price { font-size: 21px; }
  .product .choose-button { padding-inline: 10px; font-size: 12px; }
}
@media(max-width:600px) {
  .wrap { width: calc(100% - 32px); margin-inline: auto; }
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .logo-header { height: 114px; width: calc(100% - 32px); max-width: 370px; }
  .logo-toggle { width: 72px; height: 72px; }
  .logo-header.is-expanded { height: 166px; }
  .logo-menu { gap: 10px 48px; }
  .logo-action { min-height: 59px; gap: 7px; padding: 10px 7px; font-size: 12px; }
  .logo-action svg { width: 19px; height: 19px; }
  .logo-hint { font-size: 10px; bottom: 5px; }
  .intro { padding-top: 8px; padding-bottom: 16px; }
  .intro h1 { font-size: 30px; }.intro>div>p { font-size: 13px; margin-top: 6px; }
  .halves-banner { height: 84px; margin-top: 12px; gap: 18px; }
  .halves-banner .split-pizza, .halves-banner .split-pizza img { width: 138px; height: 138px; }
  .halves-banner strong { font-size: 20px; }.halves-banner-copy { gap: 6px; }
  .catalog-toolbar { gap: 10px; margin-bottom: 8px; padding-bottom: 10px; }
  .category-tabs { gap: 14px; }
  .category-tabs button { font-size: 20px; min-height: 44px; padding-block: 12px; }
  .fulfillment-control { margin-left: 0; }
  .segmented button { min-height: 44px; font-size: 11px; padding-inline: 10px; }
  .order-context { margin: -3px 0 12px; }
  .order-context .location-button { font-size: 12px; min-height: 44px; padding: 0; }
  .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 16px; row-gap: 22px; }
  .product h2 { font-size: 20px; min-height: 48px; align-items: start; margin: 8px 0 4px; }
  .product .description { display: none; }
  .product .price { font-size: 20px; }
  .product .choose-button { min-height: 44px; padding: 8px 10px; font-size: 12px; }
  .product .spicy-mark { font-size: 9px; padding: 2px 4px; }
  .product.drink h2 { min-height: 0; }
  .product-dialog { padding-bottom: max(24px,env(safe-area-inset-bottom)); }
  .dialog { overscroll-behavior: contain; }
  .checkout-form input, .checkout-form textarea, .checkout-form select { font-size: 16px; }
  .close-button { width: 44px; height: 44px; }
  .flavor-arrows button { width: 44px; height: 44px; }
  .text-button, .footer>div button, .footer>div a { min-height: 44px; }
  .mobile-cart:not([hidden]) { min-height: 48px; }
  .service-note { margin-top: 28px; padding-block: 24px; }
}
@media(max-width:370px) {
  .product-grid { column-gap: 12px; }.product h2 { font-size: 18px; min-height: 44px; }
  .product .price { font-size: 19px; }.product .choose-button { padding-inline: 8px; }
  .logo-action { gap: 5px; font-size: 11px; }.logo-action svg { width: 17px; height: 17px; }
  .halves-banner { gap: 12px; padding-right: 10px; }
  .halves-banner .split-pizza, .halves-banner .split-pizza img { width: 110px; height: 110px; }
  .category-tabs { gap: 20px; }
}