#billboardDisplay{text-align:center;grid-template-columns:auto 1fr auto;grid-template-areas:"title title title""navPrev img navNext"".desc.";place-items:center;gap:1ch;width:fit-content;margin-block:1em 3em;margin-inline:auto;display:grid}#billboardName{grid-area:title}.navLink{background-color:var(--accent-color);color:#fff;--translate-distance:1em;border-radius:1000px;width:clamp(2em,10vw,3em);height:clamp(2em,10vw,3em);transition:background-color .5s;&:is(:hover,:focus){background-color:hsl(from var(--accent-color) h s calc(l * 1.2))}&>svg{transition:all .5s}&.unavailable{visibility:hidden}}#navPrevious{grid-area:navPrev}#navNext{grid-area:navNext}#navPrevious:is(:hover,:focus) svg{translate:calc(var(--translate-distance) * -1)}#navNext:is(:hover,:focus) svg{translate:calc(var(--translate-distance) * 1)}#billboardName{font-family:Dancing Script,sans-serif;font-size:2em}#billboardImg{border-radius:5px;grid-area:img;min-width:50vw;margin-inline:auto}#billboardsDetails{background-color:hsl(from var(--accent-color) h s l / .2);border-radius:5px;grid-area:desc;width:100%;padding:1em 2em}#billboardDescription{margin-block-start:0}#billboardRemark{border:1px solid #8888;border-radius:5px;padding-block:.5em;padding-inline:calc(1em + 2ch) 1em;font-style:italic;position:relative;&:before{content:"ℹ";position:absolute;inset-inline-start:1ch}}#detailsList{border-block-start:2px solid #8884;flex-wrap:wrap;justify-content:center;gap:2ch;padding-block-start:1em;display:flex;&>div{align-items:center;gap:.5ch;display:flex}}@media screen and (width<900px){#billboardDisplay{grid-template-columns:1fr 1fr;grid-template-areas:"navPrev navNext""title title""img img""desc desc"}.navLink{--translate-distance:.5em;width:calc(100% - 1em);height:2em}}