@use "@uqds/core/src/scss/global" as core;

.uq-sidebar-right-layout {
  display: flex;
  flex-direction: column;

  @media #{core.$screen-lg-up} {
    display: grid;
    gap: 0 32px;
    grid-template-columns:
      1fr
      296px;
  }

  @media #{core.$screen-xl-up} {
    grid-template-columns:
      1fr
      308px;
  }
}

.uq-sidebar-right-layout__main {
  grid-column: 1 / span 1;

  &.uq-sidebar-right-layout__first {
    grid-row: 1 / span 2;
  }

  &.uq-sidebar-right-layout__second {
    grid-row: 3 / span 1;
  }
}

.uq-sidebar-right-layout__sidebar {
  grid-column: 2 / span 1;

  &.uq-sidebar-right-layout__first {
    grid-row: 1 / span 1;
  }

  &.uq-sidebar-right-layout__second {
    grid-row: 2 / span 2;
  }
}

/* Allow source based ordering of blocks for news homepage layout. */
.uq-sidebar-right-layout:has(.uq-sidebar-right-layout__first) {
  @media #{core.$screen-lg-up} {
    grid-template-rows: min-content min-content 1fr;
  }
}