@font-face { font-family: "IntraNet"; src: url("../fonts/figma/IntraNet-Regular.otf") format("opentype"); font-style: normal; font-weight: 400; font-display: swap; } @font-face { font-family: "Funnel Sans"; src: url("../fonts/figma/FunnelSans-Regular.otf") format("opentype"); font-style: normal; font-weight: 400; font-display: swap; } @font-face { font-family: "Funnel Sans"; src: url("../fonts/figma/FunnelSans-Bold.otf") format("opentype"); font-style: normal; font-weight: 700; font-display: swap; } html { scroll-padding-top: 24px; overflow-anchor: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } html, body { overflow-x: clip; } ::selection { color: inherit; background: rgba(245, 56, 67, .28); } body, .text, .paragraph, .subtitle, .h2, .description, .navlink, .span-link { font-family: "Funnel Sans", sans-serif !important; } body, .text.text-body { font-weight: 400; } :focus-visible { outline: 2px solid currentColor; outline-offset: 4px; } .paragraph { font-weight: 400; letter-spacing: -1.4px; } .h2 { font-weight: 700; letter-spacing: -1.4px; } .text.text-label, .description, .navlink, .subtitle { font-weight: 400; } .langs, .link-webflow, .w-webflow-badge { display: none !important; } .navmenu { overflow-x: hidden; text-align: left !important; } .navlink { display: block; text-align: left !important; } /* Light hover for every link. */ @media (hover: hover) and (pointer: fine) { a, .references summary { transition-property: opacity; transition-duration: 160ms; transition-timing-function: cubic-bezier(.2, 0, 0, 1); } a:hover, .references summary:hover { opacity: .7; } .footer-top-link:hover { opacity: 1; } } .description { text-align: left !important; font-size: 18px; line-height: 24px; letter-spacing: .09px; } .w-nav[data-collapse="all"] .burger { display: flex; justify-content: flex-start; gap: 28px; width: auto; padding-right: 0; padding-left: 0; color: var(--red); font-family: "Funnel Sans", sans-serif; font-size: 24px; font-weight: 400; line-height: 32px; white-space: nowrap; } .burger:not(.w--open), .burger.w--open { top: 32px; right: 32px; margin: 0; } .index-label { width: 64px; } .index-arrow { width: 32px; min-width: 32px; height: 32px; background-color: currentColor; -webkit-mask: url("../media/icons/index-arrow.svg") center / contain no-repeat; mask: url("../media/icons/index-arrow.svg") center / contain no-repeat; font-size: 0; line-height: 0; transform: rotate(0deg); transition-property: transform; transition-duration: 160ms; transition-timing-function: cubic-bezier(.2, 0, 0, 1); } .burger.w--open .index-arrow { transform: rotate(180deg); } .main .container { position: relative; height: 100%; } .hero-meta { position: absolute; top: 324px; left: 0; right: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 56px; align-items: start; } .hero-counter { display: flex; gap: 56px; color: var(--red); font-family: "Funnel Sans", sans-serif; font-size: 24px; font-weight: 400; line-height: 32px; text-align: left; opacity: .4; } .main-title { max-width: min(1376px, calc(100vw - 64px)); margin: 0; color: var(--red); font-family: "IntraNet", sans-serif; font-size: clamp(72px, 7.1vw, 102px); font-weight: 400; line-height: .98; letter-spacing: 0; text-transform: none; } .main-title span, .footer-title-line { display: block; width: max-content; max-width: 100%; } .subtitle.subtitle-main { width: auto; min-width: 0; max-width: 100%; position: static; margin: 0; font-size: 24px; line-height: 32px; } .main { padding: 48px 32px 32px; } /* Staggered hero fade-in on load. The .hero-fade class is set by an inline script before first paint (and the hide rule below is mirrored inline in index.html so it applies even before this stylesheet loads); .hero-ready arrives once the hero is assembled, so the subtitle and counter animate only after they settle into .hero-meta. */ @media (prefers-reduced-motion: no-preference) { html.hero-fade:not(.hero-ready) .main-title, html.hero-fade:not(.hero-ready) .subtitle.subtitle-main, html.hero-fade:not(.hero-ready) .hero-counter, html.hero-fade:not(.hero-ready) .burger { opacity: 0; } @keyframes hero-fade-in { from { opacity: 0; transform: translateY(10px); } } html.hero-ready .main-title, html.hero-ready .subtitle.subtitle-main, html.hero-ready .hero-counter, html.hero-ready .burger { animation: hero-fade-in 600ms cubic-bezier(.2, 0, 0, 1) backwards; } html.hero-ready .subtitle.subtitle-main { animation-delay: 140ms; } html.hero-ready .hero-counter { animation-delay: 280ms; } html.hero-ready .burger { animation-delay: 420ms; } } .section { scroll-margin-top: 24px; } .section img.photo, .section img.photo-small, .section-new .new-lead img, .section-new .new-support img { width: 100%; max-width: 100%; height: auto !important; min-height: 0 !important; object-fit: contain !important; filter: none !important; } .section-new .grid-new { grid-template-rows: auto auto auto auto; } .section-new .info { min-width: 0; margin-bottom: 24px; } .h2-year { width: max-content; white-space: nowrap; } .text.text-body { font-size: 24px; line-height: 32px; letter-spacing: -.6px; } .new-dividers { grid-area: 1 / 1 / 3 / 13; align-self: stretch; justify-self: stretch; } .new-title { grid-area: 1 / 1 / 2 / 7; } .new-year { grid-area: 1 / 7 / 2 / 10; } .new-credits { grid-area: 2 / 1 / 3 / 7; } .new-address { grid-area: 2 / 7 / 3 / 13; } .new-lead { grid-column: 1 / 13; grid-row: 3; margin: 0 0 24px; } .new-lead img, .new-support img { display: block; } .new-support-media { width: 100%; min-width: 0; } .new-caption { grid-row: 4; margin: 0; } .new-copy { grid-row: 4; } .new-copy .text-body + .text-body { margin-top: 0; } .pattern-a .new-caption { grid-column: 5 / 9; } .pattern-a .new-copy { grid-column: 9 / 13; } .pattern-b .new-caption, .pattern-c .new-caption { grid-column: 1 / 4; } .pattern-b .new-copy, .pattern-c .new-copy { grid-column: 5 / 13; } .new-support { margin: 128px 0 0; } .new-support figcaption { position: relative; z-index: 2; margin-top: 24px; } .section-new .new-lead img.photo-treatment { filter: grayscale(1) contrast(.82) brightness(1.08) !important; } .pattern-a .new-support-1 { grid-column: 1 / 5; grid-row: 5 / 7; align-self: end; } .pattern-a .new-support-2 { grid-column: 5 / 9; grid-row: 6; } .pattern-a .new-support-3 { grid-column: 9 / 13; grid-row: 6; } .pattern-b .new-support-1 { grid-column: 1 / 5; grid-row: 5; } .pattern-b .new-support-2 { grid-column: 5 / 13; grid-row: 5; } .pattern-b .new-support-3 { grid-column: 1 / 5; grid-row: 6; margin-top: 56px; } .pattern-c .new-support-1 { grid-column: 1 / 8; grid-row: 5; } .pattern-c .new-support-2 { grid-column: 9 / 13; grid-row: 5; align-self: end; } .pattern-c .new-support-3 { grid-column: 5 / 9; grid-row: 6; margin-top: 56px; } @media screen and (min-width: 768px) { #military-towers .new-support-1 { grid-column: 1 / 5; grid-row: 5; margin-top: 224px; } #military-towers .new-support-2 { grid-column: 5 / 13; grid-row: 5; margin-top: 224px; } #pionir-hall-aleksandar-nikolic-hall .new-support-1 { grid-column: 1 / 8; grid-row: 5; margin-top: 128px; } #pionir-hall-aleksandar-nikolic-hall .new-support-2 { grid-column: 9 / 13; grid-row: 5; margin-top: 128px; } #zitomlin-silos .new-support-1 { grid-column: 1 / 8; grid-row: 5; align-self: start; margin-top: 128px; } #zitomlin-silos .new-support-2 { grid-column: 9 / 13; grid-row: 5; margin-top: 128px; } #museum-of-contemporary-art .new-support-1 { grid-column: 1 / 9; grid-row: 5; } #museum-of-contemporary-art .new-support-2 { grid-column: 10 / 13; grid-row: 5; align-self: start; margin-top: 128px; } #sava-centar .new-support-1, #palace-of-serbia .new-support-1 { grid-column: 1 / 9; grid-row: 5; } #sava-centar .new-support-1 { margin-top: 128px; transform: translateY(var(--media-align-shift, 0)); } #sava-centar .new-support-2 { grid-column: 9 / 13; grid-row: 5; margin-top: 280px; } #automatic-telephone-exchange .new-support-1 { grid-column: 1 / 8; grid-row: 5; margin-top: 128px; } #automatic-telephone-exchange .new-support-2 { grid-column: 9 / 13; grid-row: 5; margin-top: 128px; } #block-28-televizorka .new-lead { grid-column: 1 / 13; } #block-28-televizorka .new-support-1 { grid-column: 1 / 9; grid-row: 5; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: 24px; align-items: start; } #block-28-televizorka .new-support-1 .new-support-media { grid-column: 1 / 6; } #block-28-televizorka .new-support-1 figcaption { grid-column: 6 / 9; margin-top: 0; } #blocks-61-64 .new-support-3 { grid-column: 1 / 9; grid-row: 5; margin-top: 128px; } #blocks-61-64 .new-support-1 { grid-column: 1 / 5; grid-row: 6; align-self: start; margin-top: 52px; } #blocks-61-64 .new-support-2 { grid-column: 5 / 9; grid-row: 6; align-self: start; margin-top: 52px; } #blocks-61-64 .new-support-2 img { aspect-ratio: 1238 / 2200; object-fit: cover !important; } .sticky-media-figure { align-self: start !important; } .sticky-media-figure .new-support-media { height: var(--sticky-track-height); min-height: 0; position: relative; } .sticky-media-figure .new-support-media img { position: sticky; top: 32px; } #zemun-tower-blocks .new-support-1 { position: sticky; top: 32px; align-self: start; } [id="25-may-sports-center"] .photo-small-25may { top: 32px; } [id="25-may-sports-center"] .image-wrap-25may { padding-bottom: var(--sticky-stop-inset, 0px); } } .footer { box-sizing: border-box; min-height: max(844px, 100svh); } .footer-grid { display: grid; min-height: calc(max(844px, 100svh) - 64px); grid-template-rows: auto auto minmax(160px, 1fr) auto auto; align-content: start; row-gap: 0; } .footer-note, .footer-location, .footer-fonts, .footer-top-link, .references { color: var(--grey); font-family: "Funnel Sans", sans-serif; font-size: 24px; font-weight: 400; line-height: 32px; letter-spacing: 0; } .footer-top-link { grid-column: 10 / 13; grid-row: 1; justify-self: end; align-self: start; display: flex; align-items: center; gap: 12px; opacity: .7; text-decoration: none; white-space: nowrap; } .footer-top-icon { width: 24px; height: 24px; background-color: currentColor; -webkit-mask: url("../media/icons/back-to-top.svg") center / contain no-repeat; mask: url("../media/icons/back-to-top.svg") center / contain no-repeat; } .footer-note-intro { grid-column: 1 / 5; grid-row: 1; } .footer-note-photography { grid-column: 5 / 9; grid-row: 1; } .footer-fonts { grid-column: 5 / 10; grid-row: 5; align-self: start; margin: 32px 0 0; opacity: .7; } .footer-note-project { grid-column: 1 / 10; grid-row: 2; margin-top: 32px; } .footer-note a { color: inherit; border-bottom: 2px solid rgba(209, 209, 209, .4); text-decoration: none; } .references-summary-label { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-decoration-thickness: 2px; text-decoration-color: rgba(209, 209, 209, .8); text-underline-offset: 7px; } .references { grid-column: 1 / 5; grid-row: 5; align-self: start; margin-top: 32px; opacity: .7; } .references summary { width: max-content; cursor: pointer; list-style: none; text-decoration: none; } .references summary::-webkit-details-marker { display: none; } .references ol { width: min(900px, calc(100vw - 64px)); max-width: none; margin: 32px 0 0; padding-left: 24px; font-size: 16px; line-height: 24px; } .references a { color: inherit; text-decoration-color: rgba(209, 209, 209, .4); text-underline-offset: 3px; } .footer-title-text { grid-column: 1 / 13; grid-row: 4; max-width: min(1376px, calc(100vw - 64px)); margin-top: 0; color: var(--grey); font-family: "IntraNet", sans-serif; font-size: clamp(72px, 7.1vw, 102px); font-weight: 400; line-height: .98; letter-spacing: 0; text-transform: none; } .footer-location { grid-column: 10 / 13; grid-row: 5; align-self: start; justify-self: end; margin-top: 32px; opacity: .7; white-space: nowrap; } @media screen and (max-width: 991px) { .main-title { max-width: 100%; } .main-title, .footer-title-text { font-size: clamp(68px, 7.1vw, 102px); } .new-support { margin-top: 80px; } .footer-note-intro { grid-column: 1 / 7; } .footer-note-photography { grid-column: 7 / 13; } .footer-note-project { grid-column: 1 / 13; } .footer-title-text { margin-top: 0; } } @media screen and (min-width: 768px) and (max-width: 880px) { .main { padding-top: 96px; } .hero-meta { top: 388px; } .main-title, .footer-title-text { max-width: 100%; font-size: clamp(62px, 7.8vw, 68px); } } @media screen and (max-width: 767px) { html.index-open, body.index-open { overflow: hidden; overscroll-behavior: none; } body.index-open { position: fixed; top: var(--index-scroll-offset, 0); right: 0; left: 0; width: 100%; } .navmenu { box-sizing: border-box; width: 100vw !important; max-width: none; height: 100dvh; max-height: 100dvh; margin: 0 !important; padding: 72px 0 24px; position: fixed; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .w-nav[data-collapse="all"] .burger.w--open { color: var(--grey); } .w-nav[data-collapse="all"] .burger { min-width: 116px; min-height: 44px; box-sizing: border-box; justify-content: flex-end; padding-block: 6px; transform: translateY(-6px); transition-property: opacity; transition-duration: 160ms; transition-timing-function: cubic-bezier(.2, 0, 0, 1); } .burger:not(.w--open), .burger.w--open { top: 16px; right: 16px; } /* Figma hero: the photo window spans the full frame width with a 653/402 aspect, hangs from the top, and the red background shows beneath it. The image files are the exact Figma node render (crop and monochrome treatment included). */ .main { background-color: var(--red); background-image: image-set( url("../media/hero/hero-mobile-v2-800.webp") 1x, url("../media/hero/hero-mobile-v2-1600.webp") 2x ); background-repeat: no-repeat; background-size: 100vw auto; background-position: 50% 0; height: 100vh; height: 100svh; min-height: 0; max-height: none; padding-top: 82px; padding-right: 16px; padding-bottom: 16px; padding-left: 16px; position: relative; bottom: auto; } .main-wrap { display: block; } .what { margin-top: 0; margin-bottom: 0; } .hero-meta { position: static; margin-top: 16px; display: block; } .subtitle.subtitle-main { margin: 0; } .hero-counter { position: static; width: 100%; margin-top: 16px; justify-content: space-between; gap: 24px; font-size: 18px; line-height: 24px; } .main-title { max-width: 100%; font-size: clamp(37px, 7.8vw, 60px); } .main-title span, .footer-title-line { width: auto; max-width: none; } .description, .references, .footer-fonts, .footer-top-link, .footer-location { opacity: 1; } .h2.h2-year { opacity: .3; } .section:not(.section-new) .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; align-items: start; } .section:not(.section-new) .grid > * { grid-area: auto !important; grid-column: 1 / -1 !important; grid-row: auto !important; min-width: 0; max-width: 100%; order: 10; align-self: start; justify-self: stretch; } .section:not(.section-new) .grid > .grid-dividers { grid-area: 1 / 1 / 3 / 3 !important; order: 0; align-self: stretch; } .section:not(.section-new) .grid > .h2-name { grid-area: 1 / 1 / 2 / 2 !important; order: 1; width: auto; margin: 16px 8px 64px 0; } .section:not(.section-new) .grid > .h2-year { grid-area: 1 / 2 / 2 / 3 !important; order: 2; justify-self: start; margin: 16px 0 64px 8px; } .section:not(.section-new) .grid > .info-architects { grid-area: 2 / 1 / 3 / 2 !important; order: 3; padding: 0 8px 0 0; } .section:not(.section-new) .grid > .info-address { grid-area: 2 / 2 / 3 / 3 !important; order: 3; justify-content: flex-start; padding: 0 0 0 8px; } .section:not(.section-new) .grid > img.photo { order: 4; margin: 0 0 16px; } .section:not(.section-new) .grid > img.photo + .description { order: 5; } .section:not(.section-new) .grid > .text-wrap { padding: 64px 0; } .section:not(.section-new) .grid > img.photo-small, .section:not(.section-new) .grid > .image-wrap, .section:not(.section-new) .grid > .photos-wrap { width: 100%; margin: 16px 0 0; padding: 0; position: static; transform: none !important; } .section:not(.section-new) .grid > .description, .section:not(.section-new) .descriptions-wrap, .section:not(.section-new) .descriptions-wrap-2 { width: 100%; margin: 16px 0 0; padding: 0; } .section:not(.section-new) .descriptions-wrap > .description, .section:not(.section-new) .descriptions-wrap-2 > .description { margin: 0 0 16px; } .section:not(.section-new) .photos-wrap { gap: 16px; } .section:not(.section-new) .photo-small, .section:not(.section-new) .photo-small-25may, .sticky-media-figure, .sticky-media-figure .new-support-media, .sticky-media-figure .new-support-media img, #zemun-tower-blocks .new-support-1 { height: auto !important; min-height: 0 !important; position: static !important; top: auto !important; } .section img.photo, .section img.photo-small, .section .image-wrap, .section .photos-wrap, .section-new .new-lead, .section-new .new-support, .section-new .new-lead img, .section-new .new-support img { opacity: 1 !important; transform: none !important; translate: none !important; scale: none !important; animation: none !important; transition-property: none !important; } .section-new .grid-new { grid-template-columns: repeat(6, minmax(0, 1fr)); } .new-dividers { grid-area: 1 / 1 / 3 / 7; } .new-title { grid-area: 1 / 1 / 2 / 4; } .new-year { grid-area: 1 / 4 / 2 / 7; } .new-credits { grid-area: 2 / 1 / 3 / 4; } .new-address { grid-area: 2 / 4 / 3 / 7; } .new-lead { grid-column: 1 / 7; } .pattern-a .new-caption, .pattern-b .new-caption, .pattern-c .new-caption { grid-column: 1 / 3; } .pattern-a .new-copy, .pattern-b .new-copy, .pattern-c .new-copy { grid-column: 3 / 7; } .pattern-a .new-support-1, .pattern-b .new-support-1, .pattern-c .new-support-1 { grid-column: 1 / 4; grid-row: 5; } .pattern-a .new-support-2, .pattern-b .new-support-2, .pattern-c .new-support-2 { grid-column: 4 / 7; grid-row: 5; align-self: end; } .pattern-a .new-support-3, .pattern-b .new-support-3, .pattern-c .new-support-3 { grid-column: 2 / 6; grid-row: 6; } #sava-centar .new-support-1 { transform: none !important; } #blocks-61-64 .new-support-2 img { aspect-ratio: auto; object-fit: contain !important; } .footer { min-height: 0; padding: 20px; } .footer-grid { min-height: 0; grid-template-columns: 1fr; grid-template-rows: repeat(6, auto); } .footer-note-intro, .footer-note-photography, .footer-note-project, .footer-title-text, .references, .footer-fonts, .footer-top-link, .footer-location { grid-column: 1; grid-row: auto; min-width: 0; width: 100%; max-width: 100%; } .footer-fonts { justify-self: start; margin-top: 24px; } .footer-top-link { width: auto; justify-self: start; margin-bottom: 32px; } .footer-note-photography, .footer-note-project { margin-top: 32px; } .footer-title-text { margin-top: 96px; font-size: clamp(37px, 7.8vw, 60px); } .references { margin-top: 64px; } .footer-location { justify-self: start; margin-top: 24px; } .references summary { width: auto; } .references ol, .references li, .references a { width: auto; max-width: 100%; overflow-wrap: anywhere; } } /* Mobile editorial pass: keep the desktop composition untouched. */ @media screen and (max-width: 767px) { .w-nav[data-collapse="all"] .burger { min-width: 0; padding-right: 0; padding-left: 0; gap: 8px; font-size: 18px; line-height: 24px; } .index-label { width: auto; } .index-arrow { width: 24px; min-width: 24px; height: 24px; } .main-title span:nth-child(2), .main-title span:nth-child(3), .footer-title-line:nth-child(2), .footer-title-line:nth-child(3) { display: inline; } .main-title span:nth-child(3)::before, .footer-title-line:nth-child(3)::before { content: " "; white-space: pre; } .subtitle.subtitle-main, .text.text-body, .footer-note, .references, .footer-fonts, .footer-top-link, .footer-location { font-size: 20px; line-height: 28px; letter-spacing: -.35px; } .references ol { font-size: 16px; line-height: 24px; letter-spacing: 0; } .description { font-size: 16px; line-height: 24px; opacity: .5; text-wrap: pretty; } .section:not(.section-new) .grid > img.photo { margin-bottom: 0; } .section:not(.section-new) .grid > img.photo + .description, .section:not(.section-new) .grid > .description, .section:not(.section-new) .descriptions-wrap > .description, .section:not(.section-new) .descriptions-wrap-2 > .description { margin-top: 16px; margin-bottom: 0; } .section:not(.section-new) .grid > img.photo-small, .section:not(.section-new) .grid > .image-wrap, .section:not(.section-new) .grid > .photos-wrap { margin-top: 64px; } .section-new .new-lead { margin-bottom: 0; } .section-new .new-caption { width: 100%; max-width: 100%; grid-column: 1 / -1; margin-top: 16px; } .section-new .new-support { margin-top: 64px; } .section-new .new-support figcaption { margin-top: 16px; } [id="25-may-sports-center"] .image-wrap .description { margin-top: 16px; } } @media screen and (max-width: 520px) { .main-title { max-width: 100%; font-size: clamp(24px, 7.55vw, 34px); line-height: 1; letter-spacing: 0; } .subtitle.subtitle-main { text-wrap: pretty; } .section:not(.section-new) .grid > .h2-name { width: 100%; margin: 16px 8px 16px 0; overflow-wrap: break-word; } .section:not(.section-new) .grid > .h2-year { margin: 16px 0 16px 8px; } .section-new .grid-new { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .new-dividers { grid-area: 1 / 1 / 3 / 3; } .section-new .new-title { grid-area: 1 / 1 / 2 / 2; width: 100%; padding-right: 8px; margin: 16px 8px 16px 0; overflow-wrap: break-word; } /* Specificity 0,0,2,0 — must match Webflow's `.h2.h2-year` so the year keeps its 16px top margin at ≤479px and stays level with the title's first line. */ .section-new .new-year { grid-area: 1 / 2 / 2 / 3; z-index: 1; justify-self: start; margin: 16px 0 16px 8px; text-align: left; } .new-credits { grid-area: 2 / 1 / 3 / 2; } .new-address { grid-area: 2 / 2 / 3 / 3; } .new-lead { grid-column: 1 / 3; grid-row: 3; } .pattern-a .new-caption, .pattern-b .new-caption, .pattern-c .new-caption { grid-column: 1 / 3; grid-row: 4; } .pattern-a .new-copy, .pattern-b .new-copy, .pattern-c .new-copy { grid-column: 1 / 3; grid-row: 5; padding: 64px 0; } .pattern-a .new-support-1, .pattern-a .new-support-2, .pattern-a .new-support-3, .pattern-b .new-support-1, .pattern-b .new-support-2, .pattern-b .new-support-3, .pattern-c .new-support-1, .pattern-c .new-support-2, .pattern-c .new-support-3 { grid-column: 1 / 3; grid-row: auto; margin-top: 64px; } .footer-title-text { margin-top: 80px; font-size: clamp(24px, 7.55vw, 34px); line-height: 1; } .section:not(.section-new) .h2-name { font-size: 27px; line-height: 34px; } #toblerone-building .h2-name { font-size: 24px; line-height: 30px; } .section:not(.section-new) .grid > .h2-name, .section-new .new-title, .section:not(.section-new) .grid > .h2-year, .section-new .new-year { margin-bottom: 16px; align-self: start; } .section:not(.section-new) .grid > .info-architects, .section:not(.section-new) .grid > .info-address, .section-new .new-credits, .section-new .new-address { margin-bottom: 16px; } /* Pair every legacy caption with the image it describes. */ #rudo-complex-eastern-city-gate .grid > :nth-child(9) { order: 10; } #rudo-complex-eastern-city-gate .grid > :nth-child(10) { order: 11; } #rudo-complex-eastern-city-gate .grid > :nth-child(11) { order: 12; } #rudo-complex-eastern-city-gate .grid > :nth-child(12) { order: 14; } #rudo-complex-eastern-city-gate .descriptions-wrap, #toblerone-building .descriptions-wrap, #urban-planning-institute .descriptions-wrap-2, #genex-tower-western-city-gate .descriptions-wrap, #genex-tower-western-city-gate .photos-wrap { display: contents; } #rudo-complex-eastern-city-gate .descriptions-wrap > :nth-child(1) { order: 13; } #rudo-complex-eastern-city-gate .descriptions-wrap > :nth-child(2) { order: 15; } /* display: contents unwraps these captions into the two-column grid; stretch them back to the full row. */ #rudo-complex-eastern-city-gate .descriptions-wrap > .description, #toblerone-building .descriptions-wrap > .description, #urban-planning-institute .descriptions-wrap-2 > .description { grid-column: 1 / -1; width: 100%; max-width: 100%; } #military-medical-academy .grid > :nth-child(9) { order: 10; } #military-medical-academy .grid > :nth-child(11) { order: 11; } #military-medical-academy .grid > :nth-child(10) { order: 12; } #military-medical-academy .grid > :nth-child(12) { order: 13; } #banjicas-five-towers .grid > :nth-child(9) { order: 10; } #banjicas-five-towers .grid > :nth-child(11) { order: 11; } #banjicas-five-towers .grid > :nth-child(12) { order: 12; } #banjicas-five-towers .grid > :nth-child(10) { order: 13; } #toblerone-building .descriptions-wrap > :nth-child(1) { order: 5; } #toblerone-building .grid > :nth-child(7) { order: 6; } #toblerone-building .grid > :nth-child(8) { order: 10; } #toblerone-building .descriptions-wrap > :nth-child(2) { order: 11; } #urban-planning-institute .grid > :nth-child(9) { order: 10; } #urban-planning-institute .descriptions-wrap-2 > :nth-child(1) { order: 11; } #urban-planning-institute .grid > :nth-child(10) { order: 12; } #urban-planning-institute .descriptions-wrap-2 > :nth-child(2) { order: 13; } #block-22 .grid > :nth-child(10) { order: 10; } #block-22 .grid > :nth-child(9) { order: 11; } #block-22 .grid > :nth-child(11) { order: 12; } #block-22 .grid > :nth-child(12) { order: 13; } #block-22 .grid > :nth-child(13) { order: 14; } #genex-tower-western-city-gate .grid > :nth-child(10) { order: 10; } #genex-tower-western-city-gate .grid > :nth-child(9) { order: 11; } #genex-tower-western-city-gate .grid > :nth-child(11) { order: 12; } #genex-tower-western-city-gate .photos-wrap > :nth-child(1) { order: 13; } #genex-tower-western-city-gate .descriptions-wrap > :nth-child(1) { order: 14; } #genex-tower-western-city-gate .photos-wrap > :nth-child(2) { order: 15; } #genex-tower-western-city-gate .descriptions-wrap > :nth-child(2) { order: 16; } #rudo-complex-eastern-city-gate .grid > :nth-child(11), #rudo-complex-eastern-city-gate .grid > :nth-child(12), #military-medical-academy .grid > :nth-child(10), #banjicas-five-towers .grid > :nth-child(11), #banjicas-five-towers .grid > :nth-child(12), #urban-planning-institute .grid > :nth-child(10), #genex-tower-western-city-gate .photos-wrap > img { margin-top: 64px; } #genex-tower-western-city-gate .photos-wrap > img { width: 100%; max-width: 100%; height: auto !important; } #genex-tower-western-city-gate .photos-wrap > img, #genex-tower-western-city-gate .descriptions-wrap > .description { grid-area: auto !important; grid-column: 1 / -1 !important; grid-row: auto !important; align-self: start; justify-self: stretch; } } @media screen and (max-width: 900px) and (max-height: 600px) { .sticky-media-figure, .sticky-media-figure .new-support-media, .sticky-media-figure .new-support-media img, #zemun-tower-blocks .new-support-1, [id="25-may-sports-center"] .photo-small-25may { height: auto !important; min-height: 0 !important; position: static !important; top: auto !important; } }