.accordion {
  --header-height: 2.4em;
  --circle-height: 24px;
  gap: var(--Spacing-x3);
  width: 100%;
  padding-top: var(--Spacing-x3);
  display: grid;
  grid-template-areas: "header" "content";
  grid-template-rows: var(--header-height) 1fr;
  column-gap: var(--Spacing-x-one-and-half);
}

.header {
  grid-area: header;
}

.title {
  grid-area: title;
  text-align: start;
}

.selection {
  grid-area: selection;
}

.contentWrapper {
  padding-bottom: var(--Spacing-x3);
}

.content {
  grid-area: content;
  border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
}

.disabled {
  opacity: 0.5;
  pointer-events: none;
}

@media screen and (min-width: 768px) {
  .accordion {
    column-gap: var(--Spacing-x3);
    grid-template-areas: "header" "content";
  }
}