#faq {
  text-align: center;
  padding-block: 2rem;
  margin-bottom: 8rem;

  h2 {
    font-weight: 500;
    margin: 0;
    margin-bottom: .75rem;

    @media screen and (max-width: 1080px) {
      font-size: 3rem;
    }
  }

  h5 {
    font-weight: 400;
    margin-top: 0;
    margin-bottom: 3rem;
  }

  .questions {
    display: grid;
    gap: 1.5rem;

    .question {
      transition: .35s;

      &.active {
        background-color: var(--background);
        border-color: var(--background);

        .question__body {
          display: block;
        }

        .question__icon {
          transition: .35s;          
          .bar_1 {
            background-color: var(--secondary)
          }

          .bar_2 {
            opacity: 0;
          }
        }
      }

      .question__header {
        cursor: pointer;
      }

      padding: 2rem 1.5rem;
      border-radius: var(--small-border-radius);
      text-align: left;
      border: 3px solid var(--gray);

      .question__header {
        display: grid;
        grid-auto-flow: column;
        align-items: center;
        justify-content: space-between;
        
        .question__title {
          font-size: 2rem;
          font-weight: 500;
        }
        
        .question__icon {
          position: relative;
          height: 2.25rem;
          width: 2.25rem;

          * {
            right: 6rem;
            top: 50%;
            position: absolute;
            width: 2.25rem;
            height: .375rem;
            background-color: black;

            @media screen and (max-width: 1080px) {
              right: 0;
            }
          }

          .bar_2 {
            transform: rotate(90deg);
          }
        }
      }

      .question__body {
        display: none;
        margin-top: 1.5rem;
        padding-right: 2rem;

        * {
          font-weight: 300;
          font-size: 1.5rem;
        }
      }
    }
  }
}