#hero::before {
  filter: blur(2px);
  border-radius: 5px;
}
#hero h2 { margin: 0; }
li { padding: 0.2rem 0; }

/* Store-related elements */
.dropdown {
  width: 100%;
  color: var(--lightest2);
}

.dropdownSection { text-align: left; padding-top: 1rem; }

.dropdown .label {
  position: relative;
  display: flex;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}
.dropdown .label::after { 
  content: url('/arrow.svg');
  filter: drop-shadow(0px 0px 10px #fff);
  display: inline-flex;
  bottom: 0;
  right: -2rem;
  transform: rotate(0deg);
  transition: transform .3s var(--ease);
  width: 1.5rem;
  height: 1.5rem;
}

.dropdown.dropdownOpen strong::after {
  transform: rotate(180deg);
}

.blurredShadow.small { height: 15rem; }
/* Strange bug - this is necessary for images to load properly */
.blurredShadow::before, .blurredShadow::after {
  background-image: var(--background);
}
a.button { text-decoration: none; }