.collapsible {
  & .collapsible__trigger {
    cursor: pointer;

    & .icon {
      transition: transform 200ms ease;
      &.default-icon {
        width: 2rem;
        position: absolute;
        top: 0;
        right: 2rem;
        transform: translateX(100%);
        @media (min-width: 768px) {
          right: 1rem;
        }
        @media (min-width: 1024px) {
          width: 2.5rem;
          right: 0;
        }
      }
    }

    &.open .icon {
      transform: rotate(45deg);
      &.default-icon {
        transform: translateX(100%) rotate(45deg);
      }
    }
  }

  & .collapsible__content {
    &.closed {
      display: none;
    }
  }
}