.maeveport-background-panel {
  background-color: white;
  width: 100%;
  height: 100%; /* Fill the parent stack container */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  position: absolute; /* Positioned within its relative parent */
  top: 0;
  left: 0;
  z-index: 1; /* Base layer in the stack */

  /* Desktop: Depth 180px. Notch width 80px. Cut starts at 25% from left. */
  clip-path: polygon(
    0% 0%,
    25% 0%,
    calc(25% + 80px) 180px,
    100% 180px,
    100% 100%,
    0% 100%
  );
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .maeveport-background-panel {
    /* Tablet: Depth 136px. Notch width 80px. Cut starts at 25% from left. */
    clip-path: polygon(
      0% 0%,
      25% 0%,
      calc(25% + 80px) 136px,
      100% 136px,
      100% 100%,
      0% 100%
    );
  }
}

@media (max-width: 640px) {
  .maeveport-background-panel {
    /* Mobile: Depth 82px. Notch width 80px. Cut starts at 66.666% */
    clip-path: polygon(
      0% 0%,
      66.666% 0%,
      calc(66.666% + 80px) 82px,
      100% 82px,
      100% 100%,
      0% 100%
    );
  }
}