@import url('variables.css');

.dashboard_container {
  display: grid;
  justify-items: stretch;
  grid-gap: var(--spacing-medium, 12px) !important;
  /*  justify-content: center;*/
  align-items: stretch;
}

.dashboard_title {
  overflow: hidden;
  font-weight: bold;
}

.dashboard_panel {
  /*grid-auto-flow: row;*/
  width: 100%;
  border: 1px solid var(--color-border, #b3b3b3);
  border-radius: var(--radius-small, 6px);
  box-shadow: var(--shadow-heavy, 3px 3px 5px 0px #7a7a7a);

}

.dashboard_image {
  width: 95% !important; /* Make the image fill the grid item's width */
  height: 95% !important; /* Make the image fill the grid item's height */
  /*object-fit: contain !important; !* Keeps the aspect ratio but fits within the container *!*/
}

.dashboard_panel > div {
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  /*width: 100% !important;*/
}

/* For screens narrower than 992px (tablet-ish) */
@media (max-width: 992px) {
  .dashboard_container {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: auto !important;
    grid-template-areas: unset !important; /* Reset grid-template-areas for smaller screens */
  }

  .dashboard_panel {
    grid-area: unset !important; /* Reset grid-area for smaller screens */
  }
}

/* For screens narrower than 576px (mobile) */
@media (max-width: 576px) {
  .dashboard_container {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    grid-template-areas: unset !important; /* Reset grid-template-areas for mobile screens */
  }

  .dashboard_panel {
    grid-area: unset !important; /* Reset grid-area for mobile screens */
  }
}