.portable-infobox {
    --pi-item-spacing: calc(var(--space));
    margin-left: calc(var(--space) * 2);
    font-family: 'Shippori Mincho', serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 1 0;
//     background: conic-gradient(from 42deg at 12em -24em, var(--gold-3) 30%, var(--gold-1) 40%, var(--gold-3) 50%) padding-box;
}

.portable-infobox > * {
    width: 100%;
    box-sizing: border-box;
}

// .pi-title.pi-title, .pi-header.pi-header {
//     border-bottom: 2px solid;
//     border-image: linear-gradient(90deg, var(--gold-7), transparent 80%) 30;
//     font-family: 'Libre Caslon';
//     line-height: 1em;
//     padding-bottom: .5em;
//     color: var(--gold-7);
// }

// @media (prefers-color-scheme: dark) {

//     .portable-infobox {
//         background: conic-gradient(from 42deg at 12em -24em, var(--gold-4) 30%, var(--gold-2) 40%, var(--gold-4) 50%) padding-box;
//     }

//     .pi-title.pi-title, .pi-header.pi-header {
//         border-image: linear-gradient(90deg, var(--gold-7), transparent 80%) 30;
//     }
// }

// .pi-font, .pi-secondary-font {
//     color: var(--8);
// }

// .pi-horizontal-group *:not(.pi-header), .pi-data, .pi-media{
//     background: var(--0) border-box;
// }

// @media (prefers-color-scheme: dark) {
//     .pi-horizontal-group *:not(.pi-header), .pi-data, .pi-media{
//         background: #666666 border-box;
//     }
// }

// .pi-horizontal-group .pi-horizontal-group-item:not(:first-child) {
//     border: none;
// }

.portable-infobox .pi-media {
    border: 1px solid var(--gold-5);
    padding-top: var(--pi-item-spacing);
    // background: repeating-conic-gradient(
    //     var(--0) 0% 25%,
    //     transparent 0 50%)
    //     50% / 20px 20px;
    background: black;
    // width: fit-content;
    margin-bottom: var(--pi-item-spacing);
}

.portable-infobox .pi-title, .portable-infobox .pi-header {
    padding: 0;
    padding-bottom: var(--pi-item-spacing);
    // display: flex;
    width: fit-content;
    // text-wrap: nowrap;
    gap: calc(var(--pi-item-spacing) / 2);
    flex-shrink: 0;
}

.portable-infobox .pi-title::before,
.portable-infobox .pi-title::after,
.portable-infobox .pi-header::before,
.portable-infobox .pi-header::after {
    display: block;
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position-y: 50%;
    content: ' ';
    min-width: calc(var(--pi-item-spacing) * 2);
}

.portable-infobox .pi-title::before,
.portable-infobox .pi-header:not(caption)::before {
    background-image: linear-gradient(90deg, transparent, var(--gold-1));
}

.portable-infobox .pi-title::after,
.portable-infobox .pi-header:not(caption)::after {
    background-image: linear-gradient(270deg, transparent, var(--gold-1));
}

.pi-media * {
    width: fit-content;
}

.pi-caption {
    color: var(--gold-1);
}

.pi-collapse.pi-collapse h2.pi-header.pi-header {
    padding-right: var(--pi-item-spacing);
}

.pi-header.pi-header, .pi-title.pi-title {
    text-align: center;
    // background: var(--gold-3);
    // color: var(--gold-7);
}

.pi-data-label {
    // text-align: right;
}

@media (min-width: 1201px) {
    .portable-infobox {
        margin-right: calc(var(--space) * 20 * -1);
    }
}

@media (min-width: 1200px) {

}

@media (max-width: 720px) {
    .portable-infobox {
        // background: linear-gradient(85deg, var(--gold-3) 0%, var(--white) 70% 0%, var(--gold-1) 100%);
        margin-right: var(--space);
        margin-left: var(--space);
    }

    .pi-title:first-child {
        display: none;
    }
}