main {
	display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: max-content;
  gap: var(--space-sm--bp-4);
  min-height: 0;
}

.subnav {
  position: fixed;
  bottom: 3rem;
  left: 4rem;
}

.subnav__item, 
.subnav__item--active {
  margin-right: var(--space-sm--bp-4);
}

.subnav__item--active {
  color: var(--grey);
}

.dropbtn {
  position: absolute;
  bottom: 0;
  height: 6.4rem;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  background-color: var(--pale-pink);
  border-bottom: .075em solid var(--black);
}

.dropdown {
  position: fixed;
  bottom: var(--space-sm--bp-4);
  left: var(--space-md--bp-4);
  height: 6.4rem;
  width: 40rem;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  bottom: 6.4rem;
  min-width: 100%;
  z-index: 1;
}

.dropdown-content a {
  height: 6.4rem;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  text-decoration: none;
  background-color: var(--pale-pink);
}

.dropdown-content a:hover, 
.dropdown-content a:active {
  background-color: var(--pale-pink-2);
  cursor: url(../../images/crayon.png), auto;
}

.dropdown:hover .dropdown-content,
.dropdown:active .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn,
.dropdown:active .dropbtn {
  background-color: var(--pale-pink-2);
  cursor: url(../../images/crayon.png), auto;
}

.dropbtn-text {
  width: 100%;
}

.dropbtn-arrow-down,
.dropbtn-arrow-up {
  font-size: var(--font-sm--bp-4);
  padding-top: .3rem;
  padding-right: .5rem;
}

.dropbtn-arrow-down {
  display: block;
}

.dropbtn-arrow-up {
  display: none;
}

.dropdown:hover .dropbtn-arrow-down,
.dropdown:active .dropbtn-arrow-down {
  display: none;
}

.dropdown:hover .dropbtn-arrow-up,
.dropdown:active .dropbtn-arrow-up {
  display: block;
}

figure {
  display: flex;
  flex-flow: column;
  gap: var(--space-sm--bp-4);
  height: 100%;
  width: 100%;
  background: var(--pale-pink);
}

figure:hover {
  cursor: url(../../images/sparkle-emoji.png), auto;
}

figure img {
  width: 100%;
  height: 15vw;
  object-fit: contain;
  flex: 1 1 auto;
}

figcaption {
  display: none;
  flex: 0 1 auto;
}

/* breakpoints */

@media screen and (max-width: 1000px) {
  main {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm--bp-3);
  }
  
  .dropdown {
    bottom: var(--space-sm--bp-3);
    left: var(--space-md--bp-3);
    height: 6rem;
    width: calc(50vw - (var(--space-md--bp-3) + (var(--space-sm--bp-3) / 2)));
  }

  .dropbtn-arrow-down,
  .dropbtn-arrow-up {
    font-size: var(--font-sm--bp-3);
  }

  figure{
    height: 20vw;
  }
}

@media screen and (max-width: 700px) {
  main {
    grid-template-columns: repeat(2, 1fr);
		gap: var(--space-sm--bp-2);
  }

  .dropbtn {
    height: 5.2rem;
  }

  .dropdown {
    bottom: var(--space-sm--bp-2);
    left: var(--space-md--bp-2);
    height: 5.2rem;
    width: calc(75vw - (var(--space-md--bp-2) + (var(--space-sm--bp-2) / 2)));
  }

  .dropdown-content {
    bottom: 5.2rem;
  }
  
  .dropdown-content a {
    height: 5.2rem;
  }

  .dropbtn-arrow-down,
  .dropbtn-arrow-up {
    font-size: var(--font-sm--bp-2);
  }
  
  figure{
    height: 30vw;
  }
}

@media screen and (max-width: 400px) {
  main {
    grid-template-columns: repeat(1, 1fr);
    gap: 0;
    padding: 0;
  }

  .dropbtn {
    height: 4.8rem;
  }

  .dropdown {
    bottom: var(--space-md--bp-1);
    left: var(--space-md--bp-1);
    width: calc(100vw - (var(--space-md--bp-1) * 2));
  }

  .dropdown-content {
    bottom: 4.8rem;
  }
  
  .dropdown-content a {
    height: 4.8rem;
  }

  .dropbtn-arrow-down,
  .dropbtn-arrow-up {
    font-size: var(--font-sm--bp-1);
  }

  figure {
    height: 75vh;
    padding: var(--space-lg--bp-1) var(--space-md--bp-1) var(--space-sm--bp-1);
    background: transparent;
    border-bottom: 0.075em solid var(--black);
  }

  figcaption {
    display: block;
  }

  figcaption > p {
    margin-bottom: var(--space-xs--bp-1);
  }
}