.accordion-wrapper {
   margin: 1em 0 3em;
  }
  @media (min-width:320px) and (max-width:1050px) {
    .accordion-wrapper{
     margin: 1em 1.5em 3em;
    }
  }

{# Button question#}
  .accordion-wrapper button {
	 align-items: center;
   background: none;
	 border: none;
   display: flex;
   justify-content: space-between;
   line-height: 1.4;
   padding: 1em 2.5em 0 1.5em;
	 position: relative;
   text-align: left;
	 width: 100%;
	 }
  .accordion-wrapper button:hover{
   cursor: pointer;
  }
  .accordion-wrapper button .icon {
   border: 1px solid;
	 border-radius: 50%;
   color: #fff;
	 height: 22px;
   position: absolute;
	 right: 16px;
   width: 22px;
  }
  .accordion-wrapper button .icon::before {
	 background: currentColor;
   content: '';
   display: block;
	 height: 2px;
   left: 5px;
   position: absolute;
	 top: 9px;
	 width: 10px;
  }
  .accordion-wrapper button .icon::after {
	 background: currentColor;
   content: '';
   display: block;
	 height: 10px;
   left: 9px;
   position: absolute;
	 top: 5px;
	 width: 2px;
  } 
  .accordion-wrapper button[aria-expanded='true'] .icon::after {
	 width: 0;
  }
  .accordion-wrapper button[aria-expanded='true'] + .accordion-content {
	 max-height: 100%;
	 opacity: 1;
   transition: all 200ms linear;
	 will-change: opacity, max-height;
  }
  
{# Item content answer#} 
  .accordion-wrapper .accordion-content {
   max-height: 0;
   opacity: 0;
	 overflow: hidden;
	 transition: opacity 200ms linear, max-height 200ms linear;
	 will-change: opacity, max-height;
  }
  .accordion-wrapper .accordion-content .accordion-content__margin {
	display: inline-block; 
  margin: 0 1em 0 2.5em;
  }