<div class="help-center">
	<h3>How can we help you?</h3>
	<div class="inner">
		<form action="">
			<div class="icon">
				<img src="img/icon-search.svg" alt="">
			</div>
			<input type="text" placeholder="Describe your issue">
		</form>
		<ul class="dropdown-container">
			<li>
				<input type="checkbox" id="question1">
				<label for="question1">
					Popular articles
					<img src="img/icon-arrow-down.svg" alt="">
				</label>
				<div class="dropdown-content">
					sample text.. <br>
					sample text.. <br>
					sample text.. <br>
					sample text.. <br>
					sample text.. <br>
				</div>
			</li>
			<li>
				<input type="checkbox" id="question2">
				<label for="question2">
					Fix problems & request removals
					<img src="img/icon-arrow-down.svg" alt="">
				</label>
				<div class="dropdown-content">
					sample text.. <br>
					sample text.. <br>
					sample text.. <br>
					sample text.. <br>
					sample text.. <br>
				</div>
			</li>
			<li>
				<input type="checkbox" id="question3">
				<label for="question3">
					Browse the web
					<img src="img/icon-arrow-down.svg" alt="">
				</label>
				<div class="dropdown-content">
					sample text.. <br>
					sample text.. <br>
					sample text.. <br>
					sample text.. <br>
					sample text.. <br>
				</div>
			</li>
			<li>
				<input type="checkbox" id="question4">
				<label for="question4">
					Search on your phone or tablet
					<img src="img/icon-arrow-down.svg" alt="">
				</label>
				<div class="dropdown-content">
					sample text.. <br>
					sample text.. <br>
					sample text.. <br>
					sample text.. <br>
					sample text.. <br>
				</div>
			</li>
		</ul>
	</div>
	<div class="help-articles">
		<ul>
			<li>
				<a href="#">
					<img src="https://picsum.photos/256/128?random=1" alt="">
					<span class="title">
						A friend indeed
					</span>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="https://picsum.photos/256/128?random=2" alt="">
					<span class="title">
						A friend indeed
					</span>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="https://picsum.photos/256/128?random=3" alt="">
					<span class="title">
						Return of the Ridleys
					</span>
				</a>
			</li>
		</ul>
	</div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:[email protected];700&display=swap');

* {
  padding: 0;
  margin: 0;
  list-style: none;
  border: none;
  text-decoration: none;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  font-family: 'Nunito Sans', sans-serif;

  &:focus {
    outline: 0;
  }
}

body {
  background-color: #F6F8FC;
  height: 100vh;
  display: grid;
  place-items: center;
}

.help-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 25px 0;

  h3 {
    font-size: 24px;
    font-weight: bold;
    color: #202842;
    margin-bottom: 52px;
    text-align: center;
  }

  .inner {
    width: 558px;
  }

  form {
    position: relative;
    margin-bottom: 66px;

    .icon {
      position: absolute;
      top: 0;
      left: 0;
      width: 68px;
      height: 63px;
      display: grid;
      place-items: center;
    }

    input {
      background: #fff;
      border-radius: 10px;
      height: 63px;
      width: 100%;
      box-shadow: 0 9px 10px -4px rgba(#C9D6EF, .46);
      font-size: 16px;
      color: #202842;
      padding: 0 20px 0 68px;

      &::placeholder {
        color: #828D97;
      }
    }
  }

  .dropdown-container {
    margin-bottom: 70px;

    li {
      margin-bottom: 25px;
      border-bottom: 2px solid #DEE4F1;

      label {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        height: 51px;
        padding-top: 5px;
        font-size: 18px;
        color: #202842;
        cursor: pointer;

        img {
          transition: 300ms all;
        }
      }

      .dropdown-content {
        overflow: hidden;
        max-height: 0;
        transition: 500ms all;
        font-size: 18px;
        line-height: 1.5;
        color: rgba(#202842, .6);
      }

      input {
        display: none;

        &:checked + label {
          img {
            transform: rotate(-180deg);
          }

          & + .dropdown-content {
            max-height: 50vh;
            padding-bottom: 20px;
          }
        }
      }

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .help-articles {
    width: 838px;

    ul {
      display: flex;
      margin: 0 calc(-35px / 2);

      li {
        margin: 0 calc(35px / 2);

        a {
          display: block;
          box-shadow: 0 9px 10px -4px rgba(#C9D6EF, .46);
          border-radius: 10px;
          background: #fff;
          transition: 300ms all;

          img {
            width: 100%;
            border-radius: 10px 10px 0 0;
            display: block;
            height: 128px;
            object-fit: cover;
          }

          .title {
            display: block;
            padding: 15px;
            text-align: center;
            font-size: 14px;
            color: #202842;
          }

          &:hover {
            transform: scale(1.04);
          }
        }
      }
    }
  }
}