Plump Panorama

.panorama-plump-description {
color: #ededed;
background: #202122;
border-radius: 14px;
overflow: hidden;
font: 15px/1.65 Arial, sans-serif;
margin: 20px 0;
}

.panorama-plump-description * {
box-sizing: border-box;
}

.panorama-plump-description .pp-intro {
padding: 28px 24px;
background:
radial-gradient(ellipse at 10% 15%, #505255 0%, transparent 48%),
radial-gradient(ellipse at 95% 95%, #414346 0%, transparent 48%),
#252628;
}

.panorama-plump-description p {
margin: 0;
color: #ddd;
text-align: left;
}

.panorama-plump-description p + p {
margin-top: 14px;
}

.panorama-plump-description .pp-stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
border-top: 1px solid #484b4d;
border-bottom: 1px solid #484b4d;
}

.panorama-plump-description .pp-stat {
padding: 22px 12px;
text-align: center;
min-width: 0;
}

.panorama-plump-description .pp-stat + .pp-stat {
border-left: 1px solid #484b4d;
}

.panorama-plump-description .pp-stat strong {
display: block;
color: #fff;
font-size: 25px;
line-height: 1.2;
overflow-wrap: break-word;
}

.panorama-plump-description .pp-stat span {
display: block;
color: #bbb;
font-size: 10px;
letter-spacing: 1.5px;
text-transform: uppercase;
margin-top: 7px;
}

.panorama-plump-description .pp-explore {
padding: 19px 22px 9px;
color: #aaa;
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
}

.panorama-plump-description details {
padding: 0;
margin: 0 !important;
border: 0;
border-bottom: 1px solid #484b4d;
background: transparent;
}

.panorama-plump-description summary {
display: flex;
align-items: center;
gap: 12px;
padding: 20px 22px;
cursor: pointer;
list-style: none;
color: #fff;
font-size: 14px;
font-weight: 700;
transition: background .2s;
}

.panorama-plump-description summary::-webkit-details-marker {
display: none;
}

.panorama-plump-description summary::after {
content: « + »;
margin-left: auto;
flex-shrink: 0;
font-size: 23px;
font-weight: 400;
line-height: 1;
}

.panorama-plump-description details[open] > summary::after {
content: « − »;
}

.panorama-plump-description summary:hover,
.panorama-plump-description details[open] > summary {
background: #333537;
}

.panorama-plump-description summary:focus-visible {
outline: 2px solid #fff;
outline-offset: -4px;
}

.panorama-plump-description .pp-number {
color: #a6a8aa;
font-size: 10px;
letter-spacing: 1px;
}

.panorama-plump-description .pp-content {
padding: 14px 22px 23px;
}

.panorama-plump-description .pp-item + .pp-item {
padding-top: 16px;
margin-top: 16px;
border-top: 1px solid #414345;
}

.panorama-plump-description .pp-item > strong {
display: block;
color: #fff;
font-size: 14px;
margin-bottom: 5px;
}

.panorama-plump-description .pp-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 15px;
}

.panorama-plump-description .pp-chips span {
padding: 5px 10px;
border: 1px solid #5b5e60;
border-radius: 5px;
color: #eee;
font-size: 11px;
}

.panorama-plump-description .pp-pairings {
padding-left: 18px;
margin: 14px 0 0;
color: #ddd;
}

.panorama-plump-description .pp-pairings li {
margin: 7px 0;
}

.panorama-plump-description .pp-pairings a {
color: #fff;
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-thickness: 1px;
}

.panorama-plump-description .pp-pairings a:hover {
color: #ccc;
}

.panorama-plump-description .pp-pairings a:focus-visible {
outline: 2px solid #fff;
outline-offset: 4px;
border-radius: 2px;
}

.panorama-plump-description .pp-link-note {
margin-top: 16px;
color: #bbb;
font-size: 12px;
}

.panorama-plump-description .pp-origin {
padding: 22px;
text-align: center;
}

.panorama-plump-description .pp-origin img {
display: block;
width: 201px;
max-width: 100%;
height: auto;
margin: 0 auto;
}

.panorama-plump-description .pp-footer {
padding: 19px 22px;
color: #bbb;
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
text-align: center;
}

@media (max-width: 480px) {
.panorama-plump-description .pp-intro {
padding: 24px 20px;
}

.panorama-plump-description .pp-stat {
padding: 20px 10px;
}

.panorama-plump-description .pp-stat strong {
font-size: 21px;
}

.panorama-plump-description .pp-content {
padding: 14px 16px 20px;
}

.panorama-plump-description summary {
padding: 18px 16px;
}
}