.accordion-item {
  --rotate: 0deg;
  --row: 0fr;
  --padding: 20px;
  --duration: 300ms;

  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  margin: 0;
  padding: 20px 24px;
  border: 1px solid var(--shuttle-gray-4);
  background-color: var(--white);

  @media screen and (max-width: 768px) {
    padding: 16px 12px 22px 16px;
  }

  &[open] {
    --rotate: -90deg;
    --row: 1fr;
    --padding: 44px;
  }

  .heading {
    border-radius: 12px;
    background-color: var(--white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: padding-bottom var(--duration) linear;
    cursor: pointer;
    user-select: none;
    margin: -20px -24px;
    padding: 20px 24px var(--padding) 24px;

    @media screen and (max-width: 768px) {
      padding: 16px 12px var(--padding) 16px;
      margin: -16px -12px -22px -16px;
    }

    .title {
      font-size: clamp(14px, 1.111dvw,16px);
      font-weight: 500;
      line-height: normal;
      color: var(--black-2);
    }

    .trigger {
      flex: 0 0 24px;
      width: 24px;
      height: 24px;
      display: inline-block;
      position: relative;

      &:before, &:after {
        content: '';
        border-radius: 2px;
        position: absolute;
        background-color: var(--black-2);
      }

      &:before {
        height: 2px;
        width: 18px;
        top: calc(50% - 1px);
        left: calc(3px);
      }

      &:after {
        height: 18px;
        width: 2px;
        top: 3px;
        left: calc(50% - 1px);
        transition: all 150ms linear;
        transform: rotate(var(--rotate))
      }
    }
  }

  .content {
    display: grid;
    grid-template-rows: var(--row);
    transition: var(--duration);
    overflow: hidden;

    .inner {
      min-height: 0;
      font-size: clamp(12px, 1.111dvw, 16px);
      line-height: clamp(14px, 1.528dvw, 22px);
      color: var(--black-2);
    }
  }
}