MagBoosa 8.0

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

.magboosa-description * {
box-sizing: border-box;
}

.magboosa-description .mb-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;
}

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

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

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

.magboosa-description .mb-stat {
padding: 22px 12px;
text-align: center;
min-width: 0;
}

.magboosa-description .mb-stat + .mb-stat {
border-left: 1px solid #484b4d;
}

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

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

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

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

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

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

.magboosa-description summary::marker {
content: «  »;
}

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

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

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

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

.magboosa-description .mb-number {
color: #a6a8aa;
font-size: 10px;
letter-spacing: 1px;
flex-shrink: 0;
}

.magboosa-description .mb-content {
padding: 14px 22px 23px;
}

.magboosa-description .mb-item + .mb-item {
padding-top: 16px;
margin-top: 16px;
border-top: 1px solid #414345;
}

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

.magboosa-description .mb-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 15px;
}

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

.magboosa-description ul.mb-pairings {
display: grid;
gap: 10px;
list-style: none !important;
padding: 0 !important;
margin: 16px 0 0;
}

.magboosa-description ul.mb-pairings > li {
display: block !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}

.magboosa-description ul.mb-pairings > li::before,
.magboosa-description ul.mb-pairings > li::after {
content: none !important;
display: none !important;
}

.magboosa-description ul.mb-pairings > li::marker {
content: «  » !important;
}

.magboosa-description .mb-pairings a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
min-height: 48px;
padding: 14px 16px;
background: #2b2d2e;
border: 1px solid #5b5e60;
border-radius: 8px;
color: #fff;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
text-decoration: none;
transition: background .2s, border-color .2s;
}

.magboosa-description .mb-pairings a:hover {
background: #383a3c;
border-color: #999;
color: #fff;
}

.magboosa-description .mb-pairings a:focus-visible {
outline: 2px solid #fff;
outline-offset: 3px;
border-radius: 8px;
}

.magboosa-description .mb-pairings a > span:first-child {
min-width: 0;
overflow-wrap: break-word;
}

.magboosa-description .mb-box-arrow {
flex-shrink: 0;
color: #bbb;
font-size: 18px;
}

.magboosa-description .mb-link-note {
margin-top: 16px;
color: #bbb;
font-size: 12px;
}

.magboosa-description .mb-origin {
padding: 22px;
text-align: center;
}

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

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

@media (max-width: 480px) {
.magboosa-description .mb-intro {
padding: 24px 20px;
}

.magboosa-description .mb-stat {
padding: 20px 10px;
}

.magboosa-description .mb-stat strong {
font-size: 21px;
}

.magboosa-description .mb-content {
padding: 14px 16px 20px;
}

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