.portable-infobox {
    --pi-item-spacing: calc(var(--space));
    margin-left: var(--space);
    color: var(--gold-7);
}

.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;
}

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

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

.pi-data-label {
    text-align: center;
}

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

@media (min-width: 721px) {
    .portable-infobox {
        background: linear-gradient(80deg, var(--gold-3) 0%, var(--white) 40% 0%, var(--gold-1) 60%, transparent 80%);
            // conic-gradient(from 15deg at 20% -80%, var(--gold-4) 25%, var(--white) 40%, var(--white) 44%, var(--gold-4) 50%) padding-box;
    // background: var(--gold-4)
    // background: conic-gradient(from 15deg at 20% -80%, var(--gold-4) 25%, var(--white) 40% 0%, var(--white) 44% 0%, var(--gold-4) 50%);
    // background: conic-gradient(
    //     from 339deg at 20% -60%,
    //     var(--gold-3) 40%, var(--white) 47% 0%, var(--gold-2) 49%,
    //     var(--white) 51% 0%, var(--white) 51% 0%, var(--gold-3) 52%,
    //     var(--gold-3) 53%, var(--white) 54% 0%, var(--white) 55% 0%, var(--gold-3) 56%)
    }
}

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

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