<header>
  <h1>Frequently Asked Questions</h1>
  <p>Got a burning question? You may find your answer here.</p>
</header>
<section id="accordion">
  <details name="faq-accordion">
    <summary>Payment Options</summary>
    <p>
      We offer convenient ways to pay – via the Service Centre, Direct
      Debit, BPAY® or in person — whatever suits you best.
    </p>
  </details>
  <details name="faq-accordion">
    <summary>Personalise your PIN</summary>
    <p>
      In many countries, you may be required to enter your PIN. Please make
      sure you have set one. You can select your own PIN by calling us on
      1300 123 456.
    </p>
  </details>
  <details name="faq-accordion">
    <summary>
      How can I add an additional cardholder to my Platinum Mastercard
    </summary>
    <p>
      To share your Platinum Mastercard with a family member or loved one,
      add an additional cardholder using our online application form or
      please call 1300 123 456 and ask for an additional cardholder
      application form.
    </p>
  </details>
</section>

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

details {
  margin: 0;

  p {
    padding: 0.75rem 1.5rem;
    margin: 0;
  }
}

summary {
  background: hsl(195, 40%, 96%);
  padding: 0.5em;
  cursor: pointer;
  border-block: 1px solid hsl(195, 53%, 80%);

  transition: background 0.25s ease, color 0.25s ease;

  &:hover {
    background: hsl(195, 40%, 86%);
  }

  &:last-of-type {
    border-bottom: 1px solid hsl(195, 53%, 85%);
  }
}

*,
*:after,
*:before {
  box-sizing: border-box;
}

body {
  min-height: 100dvh;
  max-width: 800px;

  margin: 0 auto;

  font-family: Inter, Helvetica, sans-serif;
}

header {
  background-color: hsl(209, 100%, 90%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='416' height='416' viewBox='0 0 200 200'%3E%3Cpolygon fill='%23DCEFFA' fill-opacity='0.49' points='100 0 0 100 100 100 100 200 200 100 200 0'/%3E%3C/svg%3E");

  padding: 1rem;

  margin-block-end: 1rem;
}

h1 {
  font-size: 1.4rem;
}

#accordion {
  margin: 0.25rem;
  outline: 1px solid hsl(195, 53%, 85%);
}