@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Instrument+Sans:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap');

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

.font-brand {
  font-family: 'Bricolage Grotesque', sans-serif;
}

button, [type="button"], [type="submit"], [role="button"] { cursor: pointer; }
button:disabled, [type="button"]:disabled, [type="submit"]:disabled { cursor: not-allowed; }

.destination-flag.fi {
  display: block !important;
  width: 3rem !important;
  min-width: 3rem !important;
  height: 3rem !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  border-radius: 9999px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.destination-flag.fi::before { display: none; }

.destination-switch-grid {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .destination-switch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .destination-switch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.region-icon {
  display: block;
  overflow: hidden;
  border-radius: 9999px;
}