.orientation-demo {
  padding: 20px;
  background: #e8f4fd;
  border-radius: 8px;
  text-align: center;
}

.orientation-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.orientation-box {
  background: #007bff;
  color: white;
  padding: 15px;
  border-radius: 6px;
}

@media (orientation: landscape) {
  .orientation-content {
    flex-direction: row;
  }
  
  .orientation-demo::before {
    content: "Landscape Mode Detected";
    display: block;
    font-weight: bold;
    color: #28a745;
    margin-bottom: 10px;
  }
}

@media (orientation: portrait) {
  .orientation-demo::before {
    content: "Portrait Mode Detected";
    display: block;
    font-weight: bold;
    color: #dc3545;
    margin-bottom: 10px;
  }
}