.faq-sec__accordions-container {
  margin-top: min(4vw, 2rem);

  display: flex;
  flex-wrap: wrap;
}

.faq-sec__accordion {
  padding: 0.75%;

  flex-basis: 50%;

  background-color: var(--whitesmoke);
  border: solid 1px #ddd;
  box-shadow: #ddd 5px 5px 10px;

  transition: background-color 300ms;
}

.faq-sec__accordion:first-of-type {
  border-top-left-radius: min(2vw, 1rem);
}

.faq-sec__accordion:nth-of-type(2) {
  border-top-right-radius: min(2vw, 1rem);
}

.faq-sec__accordion:nth-last-of-type(2) {
  border-bottom-left-radius: min(2vw, 1rem);
}

.faq-sec__accordion:last-of-type {
  border-bottom-right-radius: min(2vw, 1rem);
}

.faq-sec__accordion:not([open]):hover {
  background-color: var(--text-clr-dark);

  cursor: pointer;
}

.faq-sec__accordion:not([open]):hover > .faq-sec__question > p {
  color: var(--white);
}

.faq-sec__accordion:not([open]):hover > .faq-sec__answer {
  color: var(--whitesmoke);
}

.faq-sec__question {
  list-style: none;
  color: var(--text-clr-dark);

  font-style: italic;
}

.faq-sec__question::before {
  content: "";
  display: inline-block;
  width: 2ch;
  aspect-ratio: 1;

  margin-right: 2%;

  background-image: url(../../img/questionmark-icon.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 140%;
}

.faq-sec__question > p {
  display: inline;
  color: var(--text-clr-dark);

  font-style: italic;
}

@media screen and (max-width: 768px) {
  .faq-sec__accordion {
    flex-basis: 100%;
  }

  .faq-sec__accordion:first-of-type {
    border-top-right-radius: min(2vw, 1rem);
  }

  .faq-sec__accordion:nth-of-type(2) {
    border-top-right-radius: 0;
  }

  .faq-sec__accordion:nth-last-of-type(2) {
    border-bottom-left-radius: 0;
  }

  .faq-sec__accordion:last-of-type {
    border-bottom-left-radius: min(2vw, 1rem);
  }
}

@media screen and (min-width: 1600px) {
  .faq-sec__accordion {
    padding: 1%;
  }

  .faq-sec__question {
    font-size: 1.375rem;
  }

  .faq-sec__answer {
    font-size: 1.25rem;
  }
}