/* Blog: drawn cover for guides without a featured photo (shared by the blog templates). */
.bl-art {
  position: relative; display: flex; align-items: flex-end;
  width: 100%; height: 100%; min-height: 100%; overflow: hidden;
  padding: clamp(.75rem, 2.5vw, 1.4rem);
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(245,196,0,.20), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 14px),
    var(--bl-art-bg, #1F3B26);
  color: #FAF6EC;
  container-type: inline-size;
}
.bl-art--waste-recycling { --bl-art-bg: #2A4E33; }
.bl-art--sizes-renovations { --bl-art-bg: #3B4A2E; }
.bl-art--clean-outs { --bl-art-bg: #4A3B2A; }
.bl-art__bin {
  position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%);
  width: 38%; max-width: 220px; aspect-ratio: 42 / 30;
  background: #F5C400;
  clip-path: polygon(0 12%, 100% 12%, 92% 100%, 8% 100%);
  box-shadow: inset 0 -10px 0 rgba(0,0,0,.08);
}
.bl-art__bin::before {
  content: ''; position: absolute; left: 0; right: 0; top: 12%; height: 10%;
  background: rgba(0,0,0,.12);
}
.bl-art__label {
  position: relative;
  font-family: 'Inter', system-ui, sans-serif; font-weight: 800;
  font-size: clamp(.55rem, 1vw, .68rem); letter-spacing: .2em; text-transform: uppercase;
  color: #F5C400;
}
@container (max-width: 240px) {
  .bl-art__label { display: none; }
  .bl-art__bin { top: 50%; width: 46%; }
}