.m-accordion {
  --accordion-heading-font-family: var(--ff-primary);
  --accordion-heading-padding-block-start: 1.2rem;
  --accordion-heading-padding-block-end: 1.2rem;
  --accordion-heading-padding-inline-start: 0;
  --accordion-heading-padding-inline-end: 0;
  --accordion-content-padding-block-start: 0.5rem;
  --accordion-content-padding-block-end: 1.5rem;
  --accordion-content-padding-inline-start: 0;
  --accordion-content-padding-inline-end: 0;
  --accordion-icon-size: 1.6rem;
  border-top: var(--accordion-border, 1px solid rgb(var(--color-border)));
  border-bottom: var(--accordion-border, 1px solid rgb(var(--color-border)));
  border-radius: var(--accordion-border-radius, 0);
  background-color: var(--accordion-color-background, transparent);
}
.m-accordion--boxed {
  --accordion-base-padding: 1.6rem;
  --accordion-icon-size: 1.2rem;
  --accordion-color-background: rgb(var(--color-background-secondary));
  --accordion-heading-font-family: var(--ff-secondary);
  --accordion-heading-padding-block-start: var(--accordion-base-padding);
  --accordion-heading-padding-block-end: 1.2rem;
  --accordion-heading-padding-inline-start: var(--accordion-base-padding);
  --accordion-heading-padding-inline-end: var(--accordion-base-padding);
  --accordion-margin-block-start: 0;
  --accordion-border: none;
  --accordion-border-radius: 0.8rem;
  --accordion-padding: var(--accordion-base-padding);
  --accordion-content-padding-block-start: 0.8rem;
  --accordion-content-padding-block-end: var(--accordion-base-padding);
  --accordion-content-padding-inline-start: var(--accordion-base-padding);
  --accordion-content-padding-inline-end: var(--accordion-base-padding);
}
.m-accordion.m-accordion--open .icon {
  transform: rotate(180deg);
}
.m-accordion.m-accordion--open .icon-plus rect:last-child {
  opacity: 0;
}
.m-accordion + .m-accordion {
  margin-top: 0;
  border-top: none;
}
.m-accordion__header {
  padding-block: var(--accordion-heading-padding-block-start) var(--accordion-heading-padding-block-end);
  padding-inline: var(--accordion-heading-padding-inline-start) var(--accordion-heading-padding-inline-end);
  justify-content: space-between;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: start;
}
.m-accordion__header h2,
.m-accordion__header .h2,
.m-accordion__header h3,
.m-accordion__header .h3 {
  font-family: var(--accordion-heading-font-family);
  margin: 0;
}
.m-accordion .icon {
  aspect-ratio: 1;
  display: block;
  width: var(--accordion-icon-size);
  height: 1lh;
  transform: rotate(0deg);
  transition: transform var(--default-transition-timing) var(--default-transition-easing);
}
.m-accordion .icon-plus {
  margin-right: 0.4rem;
}
.m-accordion .icon-plus rect:last-child {
  opacity: 1;
  transition: opacity var(--default-transition-timing) var(--default-transition-easing);
}
.m-accordion--start-open .m-accordion__content {
  display: block;
}
.m-accordion__content {
  display: none;
  padding-block: var(--accordion-content-padding-block-start) var(--accordion-content-padding-block-end);
  padding-inline: var(--accordion-content-padding-inline-start) var(--accordion-content-padding-inline-end);
}
@media screen and (min-width: 600px) {
  .m-accordion__mobile {
    --accordion-margin-block-start: 0;
    --accordion-border: none;
  }
  .m-accordion__mobile .m-accordion__content {
    padding-bottom: 1.5rem;
    display: block;
  }
  .m-accordion__mobile .icon {
    display: none;
  }
  .m-accordion__mobile .js-accordion-trigger {
    pointer-events: none;
  }
}