.grid-X-col {
    border-top: 1px solid var(--column-border-color, var(--surface-fill-3));
    border-left: 1px solid var(--column-border-color, var(--surface-fill-3));
    grid-template-columns: repeat(var(--columns), 1fr);
}


.grid-X-col>div {
    border-right: 1px solid var(--column-border-color, var(--surface-fill-3));
    border-bottom: 1px solid var(--column-border-color, var(--surface-fill-3));
    padding: var(--space-24);
}

.grid-X-col>div>p:last-child {
    margin: 0;
}

.x-col-2 {
    --columns: 2
}
.x-col-3 {
    --columns: 3
}

.x-col-4 {
    --columns: 4
}

.x-col-5 {
    --columns: 5
}

.x-col-6 {
    --columns: 6
}

@media(max-width:991px) {
    .x-col-3,
    .x-col-4,
    .x-col-5,
    .x-col-6 {
        --columns: 2
    }
}

@media(max-width:575px) {
    .x-col-3,
    .x-col-2 {
        --columns: 1
    }
}





ul.accordion-items .accordion-item-hdr {
    padding-top: var(--space-24);
    margin-bottom: var(--space-24);
}



.layout {
    display: grid;
    grid-template-columns: 3fr 4fr;
    gap: 60px;
    /* Pull both columns up to absorb the top half of the first
       100vh content block, so item 01 sits closer to the heading. */
    margin-top: -25vh;
}

.left-column {
    scroll-snap-type: y mandatory;
}

.content-block {
    min-height: 100vh;
    scroll-snap-align: start;
    opacity: 0.4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 0.2s ease-in-out;
}

.content-block.active {
    opacity: 1;
}




.right-column {
    position: relative;
}

.scrollimg-container {
    position: sticky;
    top: 0;
    height: 100vh;
}

.scrollimg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.5s ease;
    padding: var(--space-48);
}

.scrollimg.active {
    opacity: 1;
}
.scrollimg img{
    border-radius: 2px;
}

.content-block-img {
    display: none;
}

@media(max-width:991px) {
    .right-column {
        display: none;
    }

    .layout {
        display: block;
        margin-top: 0;
    }

    .content-block {
        min-height: auto;
    }

    .content-block-img {
        display: block;
        margin-bottom: var(--space-128);
    }
}
.svg-bracketed .bracket{
    --svg-bracket-height: 1em
}

.fa-flag + p, .fa-user + p{
    flex: 1;
}

#top-navigation-cloud-buffer{
    background-color: var(--gray-12);
}