input {
  display: none;
}

.dropdown {
  display: flex;
  align-items: center;
  cursor: pointer;
  width: 100%;
  margin: -6px 0 17px 0;
}

.drop-nav {
  display: flex;
  width: 100%;
}

.drop-content {
  height: 0;
  width: 100%;
  overflow: hidden;
  transition: height 0.4s ease-in-out;
}

.drop-icon {
  font-size: 4rem;
  color: var(--color-secondary);
  padding: 2rem;
  margin-left: 2rem;
  transition: 0.4s ease-in-out;
}

.dropdown:hover > .drop-icon {
	background: rgb(255 255 255 / 30%);
}

.expand > i {
  transform: rotate(180deg);
  color: var(--color-primary);
}


input:checked + .drop-content {
  height: 16rem;
}

@media screen and (max-width: 1200px) {

  .dropdown {
    margin: -6px 0 10px 0;
  }

  .drop-icon {
    font-size: 3rem;
	margin-left: 0;
  }
  
  .dropdown:hover > .drop-icon {
	background: transparent;
}

  input:checked + .drop-content {
    height: 13rem;
  }

}