.customization {
  padding: 0.5em;
}

.customization p {
  color: var(--clr-text-a1);
  font: var(--p);
  font-weight: 600;
  margin: 0.5em 0 0.3em 0;
}

.customization form {
  margin-bottom: 0.5em;
}

.customization label {
  color: var(--clr-text-a2);
  font: var(--p);
  cursor: pointer;
  transition: color 150ms ease;
}

.customization label:hover {
  color: var(--clr-text-a0);
}

.customization input[type="checkbox"] {
  cursor: pointer;
  accent-color: var(--clr-accent-b0);
  margin-right: 0.25em;
}

.customization input[type="checkbox"]:hover {
  accent-color: var(--clr-accent-b1);
}

@media (max-width: 900px) {
  .customization {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 2rem 0.5rem 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    min-width: 100%; 
    width: max-content; 
  }

  .customization::-webkit-scrollbar {
    display: none;
  }

  .customization > p {
    white-space: nowrap;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    font-weight: 600;
    display: flex;
    align-items: center;
    height: 100%;
  }

  .customization > form {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
  }

  .customization label {
    white-space: nowrap;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    cursor: pointer;
  }

  .customization input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
  }

  .customization br {
    display: none;
  }
}