main>header>hgroup>*{
    text-wrap:balance;
}

hgroup{
    margin-inline:auto;
}

h2{
    margin-inline:auto;
    max-width: 50ch;
    text-wrap:balance;
    text-align: center;
}

main>section :is(p:not(#containers p),hr){
    margin-inline:auto;
}

.scroll-x{
    position: sticky;
    top: 0;
    z-index: 999;
    border-bottom: 1px solid #ddd;
    background-color: #fdfcfb;
    margin-top: 1em
}

.grid{
    width: 100%!important;
}

.scroll-x a{
    margin-inline: 0;
    white-space: nowrap;
}
     
.scroll-x:has(+#containers #overview:target) .button:nth-of-type(1),
.scroll-x:has(+#containers #beyond:target) .button:nth-of-type(2),
.scroll-x:has(+#containers #global:target) .button:nth-of-type(3){
    background-color: #084!important;
    color: #fff!important;
}

.content{
    display: none;
    scroll-margin:calc(2.618em + 2ch);
}

#containers:has(.content:target) p,
.content:target,
.content:target ~ #photos{
    display: block!important;
}

.content:target{
    padding-top: 2.618em;
}

.card img{aspect-ratio:16/9}