.custom-slider3{
    width: 90%;
    margin: 0 auto;
}
article {
    width: 90%;
    margin: 50px auto
}
article .head {
    background: #2098d1;
    color: #FFF;
    padding: 10px;
    cursor: pointer;
    width: 50%;
    margin: 10px auto 0;
      font-size: 25px;
}
article .head i {
    float: right;
    margin-right: 10px;
    transition: transform 0.5s ease-in-out
}
article p {
    padding: 10px;
    background: #E2E2E2;
    display: none;
    width: 50%;
      margin: 0 auto;
      font-size: 22px;

}
article p:first-of-type {
    display: block
}
article .open i {
    transform: rotate(180deg)
}
@media(max-width:977px){
  article .head{
  width: 87%;
  }
  article p{
      width: 87%;
  }
}
@media(max-width:520px){
.custom-slider3{
    width: 80%;
    margin: 0 auto;

}
@media(max-width:499px){
    article .head{
  width: 98%;
  }
  article p{
  width:98%;
  }
}