/* Keep the card row at knee level in the championship background photo. */
@media (min-width: 1001px) {
  #state-chooser .location-entry .welcome-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: calc(42vw - 38px) auto;
    align-content: start;
    gap: 0;
  }
  #state-chooser .location-entry .welcome-heading {
    grid-row: 1;
    align-self: start;
  }
  #state-chooser .location-entry .state-grid {
    grid-row: 2;
    margin-top: 0;
    padding-top: 0 !important;
  }
}

/* Cover every photo frame without letterboxing or stretching the athletes. */
#state-chooser .location-entry .state-card > img {
  object-fit: cover;
  flex: none;
}
#state-chooser .location-entry .state-card[data-state="connecticut"] > img {
  object-position: 50% 20%;
}

/* Flags share the photo's bounds and fade above it, beneath the card labels. */
#state-chooser .location-entry .state-card .state-flag {
  inset: 0 0 auto;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  mix-blend-mode: normal;
}
#state-chooser .location-entry .state-card .role-top,
#state-chooser .location-entry .state-card .role-copy {
  z-index: 2;
}
#state-chooser .location-entry .state-card:focus-within .state-flag {
  opacity: .3;
  visibility: visible;
  transition-delay: 0s;
}
@media (hover: hover) {
  #state-chooser .location-entry .state-card:hover .state-flag {
    opacity: .3;
    visibility: visible;
    transition-delay: 0s;
  }
}
@media (hover: none) {
  #state-chooser .location-entry .state-card .state-flag {
    opacity: .18;
    visibility: visible;
  }
}
@media (max-width: 1000px) {
  #state-chooser .location-entry .state-grid {
    margin-top: calc(-24vw - 16px);
    padding-top: 7px !important;
  }
}