.demo-complete {
  padding: 20px;
  margin: 10px 0;
  border: 2px solid #ddd;
  border-radius: 8px;
  background: #fff;
  position: relative;
}

.demo-complete::before {
  content: "Default: No conditions met";
  position: absolute;
  top: 5px;
  right: 10px;
  background: #6c757d;
  color: white;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 12px;
}

@media screen and (max-width: 600px) {
  .demo-complete {
    background-color: #fff3cd;
    border-color: #ffc107;
  }
  .demo-complete::before {
    content: "Mobile (≤600px)";
    background: #ffc107;
    color: #212529;
  }
}

@media screen and (min-width: 601px) and (max-width: 1024px) {
  .demo-complete {
    background-color: #d1ecf1;
    border-color: #17a2b8;
  }
  .demo-complete::before {
    content: "Tablet (601px-1024px)";
    background: #17a2b8;
  }
}

@media screen and (min-width: 1025px) {
  .demo-complete {
    background-color: #d4edda;
    border-color: #28a745;
  }
  .demo-complete::before {
    content: "Desktop (≥1025px)";
    background: #28a745;
  }
}

@media screen and (orientation: portrait) and (min-width: 601px) {
  .demo-complete::after {
    content: " + Portrait";
    position: absolute;
    bottom: 5px;
    right: 10px;
    background: #e83e8c;
    color: white;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 10px;
  }
}