/* V1.302Beta: five starting Landmarks stay fully visible as a centered 3 + 2 decision grid. */

html body:not(.maintenance-mode)
  #opportunityDialog#opportunityDialog.opportunity-dialog[data-choice-source="opening_landmark"]:not([hidden])
  > .opportunity-box.opportunity-box {
  width: min(980px, calc(100vw - 28px)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html body:not(.maintenance-mode)
  #opportunityDialog#opportunityDialog.opportunity-dialog[data-choice-source="opening_landmark"]:not([hidden])
  #opportunityOptions#opportunityOptions {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, auto) !important;
  grid-auto-flow: row !important;
  align-items: stretch !important;
  width: min(100%, 760px) !important;
  margin-inline: auto !important;
  gap: clamp(8px, 1.05vw, 12px) !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode)
  #opportunityDialog[data-choice-source="opening_landmark"]
  #opportunityOptions
  > .opportunity-card {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

html body:not(.maintenance-mode)
  #opportunityDialog[data-choice-source="opening_landmark"]
  #opportunityOptions
  > .opportunity-card:nth-child(1) {
  grid-column: 1 / span 2 !important;
  grid-row: 1 !important;
}

html body:not(.maintenance-mode)
  #opportunityDialog[data-choice-source="opening_landmark"]
  #opportunityOptions
  > .opportunity-card:nth-child(2) {
  grid-column: 3 / span 2 !important;
  grid-row: 1 !important;
}

html body:not(.maintenance-mode)
  #opportunityDialog[data-choice-source="opening_landmark"]
  #opportunityOptions
  > .opportunity-card:nth-child(3) {
  grid-column: 5 / span 2 !important;
  grid-row: 1 !important;
}

html body:not(.maintenance-mode)
  #opportunityDialog[data-choice-source="opening_landmark"]
  #opportunityOptions
  > .opportunity-card:nth-child(4) {
  grid-column: 3 / span 2 !important;
  grid-row: 2 !important;
}

html body:not(.maintenance-mode)
  #opportunityDialog[data-choice-source="opening_landmark"][data-choice-count="5"]
  #opportunityOptions
  > .opportunity-card:nth-child(4) {
  grid-column: 2 / span 2 !important;
  grid-row: 2 !important;
}

html body:not(.maintenance-mode)
  #opportunityDialog[data-choice-source="opening_landmark"][data-choice-count="5"]
  #opportunityOptions
  > .opportunity-card:nth-child(5) {
  grid-column: 4 / span 2 !important;
  grid-row: 2 !important;
}

html body:not(.maintenance-mode)
  #opportunityDialog[data-choice-source="opening_landmark"]
  #opportunityOptions
  > .opportunity-card
  .opportunity-art {
  aspect-ratio: 3 / 2 !important;
  background-position: center 38% !important;
}

html body:not(.maintenance-mode)
  #opportunityDialog[data-choice-source="opening_landmark"]
  #opportunityOptions
  > .opportunity-card
  .opportunity-copy {
  min-height: 142px !important;
  padding: 10px 16px 12px !important;
  gap: 4px !important;
}

@media (min-width: 721px) {
  html body:not(.maintenance-mode)
    #opportunityDialog[data-choice-source="opening_landmark"]
    .opportunity-head.opportunity-head {
    margin-bottom: 10px !important;
  }
}

@media (max-width: 720px) {
  html body:not(.maintenance-mode)
    #opportunityDialog#opportunityDialog.opportunity-dialog[data-choice-source="opening_landmark"]:not([hidden])
    > .opportunity-box.opportunity-box {
    width: min(100%, 560px) !important;
    padding: 10px !important;
  }

  html body:not(.maintenance-mode)
    #opportunityDialog#opportunityDialog.opportunity-dialog[data-choice-source="opening_landmark"]:not([hidden])
    #opportunityOptions#opportunityOptions {
    width: 100% !important;
    gap: 6px !important;
  }

  html body:not(.maintenance-mode)
    #opportunityDialog[data-choice-source="opening_landmark"]
    #opportunityOptions
    > .opportunity-card
    .opportunity-art {
    aspect-ratio: 1 / 1 !important;
  }

  html body:not(.maintenance-mode)
    #opportunityDialog[data-choice-source="opening_landmark"]
    #opportunityOptions
    > .opportunity-card
    .opportunity-copy {
    min-height: 145px !important;
    padding: 8px 6px 10px !important;
    gap: 3px !important;
  }

  html body:not(.maintenance-mode)
    #opportunityDialog[data-choice-source="opening_landmark"]
    #opportunityOptions
    > .opportunity-card
    .opportunity-copy
    > small {
    font-size: clamp(9px, 2.55vw, 10.5px) !important;
    line-height: 1.25 !important;
  }
}