/* ===== RESET & BASE STYLES ===== */
.container-wrapper {
  position: relative;
  display: flex;
  height: 100%;
  padding: 3px;
  box-sizing: border-box;
  flex-direction: column;
  outline: none;
  outline-offset: 0;
}

/* ===== CONTAINER ROW ===== */
.container-row {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  min-height: 0;
  padding: 0;
  flex: 1;
  flex-direction: column;
}

/* ===== CONTAINER SLOT AREA ===== */
.container-slot-area {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

/* ===== CONTAINER MAX WIDTH ===== */
.container-row {
  max-width: var(--container-max-width, 100%);
  padding: 0 var(--container-padding, 20px);
  margin: 0 auto;
}

/* ===== RESPONSIVE MEDIA QUERIES ===== */
@media screen and (max-width: 1024px) {
  .container-row {
    padding: 0 var(--container-padding-tablet, 25px);
  }

  .slot-stack {
    gap: var(--grid-gutter-width-tablet, 25px);
  }
}

@media screen and (max-width: 768px) {
  .container-row {
    padding: 0 var(--container-padding-mobile, 15px);
  }

  .slot-stack {
    gap: var(--grid-gutter-width-mobile, 20px);
  }
}