.Distributors {
  --spaces: 20px 60px;
}

.Distributors .Column {
  width: 100%;
}

.Distributors label {
  display: block;
  margin-bottom: 10px;
  font-size: 1.25rem;
}

.Distributors select,
.Distributors input {
  padding: 14px 40px;
  border-radius: 10px;
  font-size: 1.375rem;
  outline: 0;
}

.Distributors select,
.Distributors input {
  width: 100%;
  padding: 14px 10px;
  border: 2px solid var(--clr-primary);
  background-color: transparent;
  color: var(--font-clr-primary);
}

.Distributorsearch-Search {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

@media screen and (min-width: 769px) {

.Distributorsearch-Search {
    display: grid;
    grid-template-rows: 1fr auto min-content;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 40px;
    grid-column-gap: 40px;
}
  }

.Distributorsearch-Continents {
  grid-area: 1 / 1 / 2 / 2;
}

.Distributorsearch-Countries {
  grid-area: 2 / 1 / 3 / 2;
}

.Distributorsearch-Zip {
  grid-area: 2 / 2 / 3 / 3;
}

.Distributors-ButtonWrapper {
  grid-area: 3 / 1 / 4 / 3;
}

.Distributors-ButtonWrapper--hidden:not(#q) {
  display: none;
}

.Distributors-Button:not(#q) {
  margin-top: 20px;
  border-color: var(--clr-primary);
  background-color: var(--clr-primary);
  color: #ffffff;
  transition: border-color 0.3s ease-in-out;
}

.Distributors-Button:not(#q):hover {
  color: #ffffff !important;
}

.Distributors-Button:not(#q):hover {
  border-color: var(--font-clr-primary);
  background-color: var(--clr-primary);
}

.Distributors .Column {
  container-type: inline-size;
}

.Distributorresults {
  display: flex;
  flex-flow: column;
  gap: 40px;
}

@container (min-inline-size: 650px) {

.Distributorresults {
    flex-flow: row;
}
  }

.Distributor-Template-right {
  max-width: 400px;
}

@container (min-inline-size: 650px) {

.Distributor-Template-right {
    order: 2;
}
  }

.Distributorresults h3:not(#q) {
  margin-top: 40px;
  text-transform: uppercase;
  color: var(--clr-primary);
}

.Distributorresults.Text * ~ p {
  margin-top: 0;
}

.Distributor-Template-website {
  display: inline-block;
  margin-top: 30px;
}

.Distributor-Template-contact1,
.Distributor-Template-phone,
.Distributor-Template-email1,
.Distributor-Template-mobile1,
.Distributor-Template-mobile2,
.Distributor-Template-contact2,
.Distributor-Template-email2 {
  display: block;
}

.Distributor-Template-contact2 {
  margin-top: 20px;
}