.layout-main-wrapper{
  grid-area: main;
}


@media (min-width: 75rem) {
  .main-content {
      width: 100%;
      margin-inline-end: none;
  }
}

@media (min-width: 75rem) {
  .layout-main {
      display: block;
      /* flex-direction: row-reverse;
      flex-wrap: wrap; */
  }
}

/* Responsive layout styles */
.main-content__container {
  background-color: var(--theme-color);
  width: 100%;
  margin: 0 auto; /* Center the content */
  padding-block-start: 0px; /*override*/
  padding-top: 1rem;
  padding-inline:0;

  display: grid;
  grid-template-rows: auto auto;
  grid-template-areas:
    "swiper-section"
    "main-section";
  
  gap: var(--section-gap);
}

.region.region--breadcrumb.grid-full.layout--pass--content-medium{
  grid-area: swiper-section;

}

.main-content__container  main .layout--pass--content-medium{
  grid-area: main-section;
}

/* Responsive behavior for smaller screens */
@media (max-width: 1470px) {
  .main-content__container {
    max-width: 100%;
    margin: 0;
  }
}

@media (max-width: 768px) {
  .main-content__container {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}




/* Scoped override: make breadcrumb region full-width and single-column */
.main-content__container .region--breadcrumb.grid-full,
.main-content__container .layout--pass--content-medium.grid-full {
  --grid-col-count: 0;
  --grid-gap: 0;
}

/* Ensure all direct children span the full grid width */
.main-content__container .region--breadcrumb.grid-full > *,
.main-content__container .layout--pass--content-medium.grid-full > * {
  grid-column: 1 / -1;
}

/* Hide the breadcrumb TODO: What does the breadcrumb do? */
.main-content__container .breadcrumb{
  border: 1px solid none;
  display: none;
}

.view, .view-content{
gap: 0;
}

.layout--pass--content-medium .node--type-page.node--view-mode-full{
  /*display: none;*/
}