Small Bait Bag™

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

.small-baitbag-description * {
box-sizing: border-box;
}

.small-baitbag-description .bag-intro {
padding: 30px 24px;
background:
radial-gradient(ellipse at 10% 15%, #505255 0%, transparent 48%),
radial-gradient(ellipse at 95% 95%, #414346 0%, transparent 48%),
#252628;
}

.small-baitbag-description .bag-eyebrow {
display: block;
font-size: 10px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: #d0d0d0;
margin-bottom: 12px;
}

.small-baitbag-description h2 {
color: #fff !important;
font: 800 29px/1.1 Arial, sans-serif;
text-transform: uppercase;
letter-spacing: -.5px;
margin: 0 0 16px;
}

.small-baitbag-description p {
margin: 0;
color: #ddd;
}

.small-baitbag-description .bag-stats {
display: grid;
grid-template-columns: 1fr 1fr;
border-top: 1px solid #484b4d;
border-bottom: 1px solid #484b4d;
}

.small-baitbag-description .bag-stat {
padding: 22px 12px;
text-align: center;
min-width: 0;
}

.small-baitbag-description .bag-stat + .bag-stat {
border-left: 1px solid #484b4d;
}

.small-baitbag-description .bag-stat strong {
display: block;
color: #fff;
font-size: 26px;
line-height: 1.2;
}

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

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

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

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

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

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

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

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

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

.small-baitbag-description .bag-number {
color: #a6a8aa;
font-size: 10px;
letter-spacing: 1px;
}

.small-baitbag-description .bag-content {
padding: 14px 22px 23px;
}

.small-baitbag-description .bag-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 15px;
}

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

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

@media (max-width: 480px) {
.small-baitbag-description .bag-intro {
padding: 26px 20px;
}

.small-baitbag-description h2 {
font-size: 25px;
}

.small-baitbag-description .bag-stat {
padding: 20px 8px;
}

.small-baitbag-description .bag-stat strong {
font-size: 20px;
}

.small-baitbag-description .bag-content {
padding: 14px 16px 20px;
}
}