:root {
  --left-w: 220px;
  --dur-h: 420ms;
  --dur-f: 320ms;
}

* { box-sizing: border-box; }
.accordion-wrapper { width: 100%; margin: 24px auto; display: flex; flex-direction: column; gap: 12px; }

/* grid: left (fixed), right (collapsible), toggle */
.accordion-item {
  display: flex;
  border-top: 1px solid #ddd;
  overflow: hidden;
  align-items: start;
  gap: 40px;
  padding-top: 20px;
}

/* left column */
.left {
  padding: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 50px;
  user-select: none;

  .icon {
    width: 88px;
    height: 88px;
    img {width: 100%;}
  }

  h4 {font-family: Regular; font-size: 19px; text-align: left;}
  h3 {font-family: SemiBold; font-size: 22px; text-align: left;}
}

/* right wrapper -> animate this height */
.right {
  padding: 0 14px;            /* horizontal padding remains; vertical padding handled inside .content */
  overflow: hidden;
  height: 0;                  /* start collapsed */
  transition: height var(--dur-h) ease;
  display: block;
  text-align: left;
  margin-left: 110px;
}

/* inner content fades */
.content {
  padding: 14px 0;            /* vertical padding inside right */
  opacity: 0;
  transition: opacity var(--dur-f) ease;
  pointer-events: none;
  margin: 0;
}

/* when open, content opacity goes to 1 (we toggle this via class + JS) */
.accordion-item.open .content { opacity: 1; pointer-events: auto; }

/* toggle rotate */
.toggle {
  background:url(../images/accArrow.png) no-repeat;
  background-size: contain;
  border: none;
  cursor: pointer;
  font-size: 16px;
  transition: transform var(--dur-h) ease;
  width: 50px;
  height: 25px;
  transform: rotate(180deg);
  margin-top: 20px;
}
.accordion-item.open .toggle { transform: rotate(0deg); }

/* small reset for paragraphs */
.right p { margin: 0 0 8px 0; }