.container {
  .faqs-section {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 72px;
    max-width: var(--lg-breakpoint);
    column-gap: 48px;
    row-gap: 24px;

    .faqs-image-container {
      flex: 1;

      .faqs-image {
        width: 100%;
      }
    }

    .faqs-info {
      flex: 1;

      .faqs-title {
        font-weight: var(--bold-weight);
        font-size: var(--xl-font-size);
        line-height: var(--giant-line-height);
        color: var(--primary-color-900);
        padding: 16px 0 24px;
        width: 100%;
        border-bottom: solid 2px var(--primary-color-300);
      }

      .faqs {
        width: 100%;

        .faq {
          display: flex;
          flex-direction: column;
          border-bottom: solid 2px var(--primary-color-300);

          .open-answer-button {
            display: flex;
            justify-content: space-between;
            padding: 24px 16px 24px 0;
            background: none;
            align-items: center;
            gap: 20px;
            cursor: pointer;
            position: relative;
            z-index: 1;

            .question {
              z-index: 1;
              font-weight: var(--md-weight);
              font-size: var(--base-font-size);
              line-height: var(--sm-line-height);
              color: var(--primary-color-900);
              text-align: left;
            }

            .plus-icon {
              color: var(--primary-color-950);
              font-size: var(--base-font-size);
              transition: transform 0.5s;
            }

            .plus-icon.icon-active {
              transform: rotate(45deg);
            }
          }

          .answer {
            overflow-y: hidden;
            transition:
              max-height 0.5s,
              padding-bottom 0.5s;
            padding-bottom: 0;
            max-height: 0;
          }

          .answer.active {
            padding-bottom: 24px;
            max-height: 50px;
          }
        }

        .open-answer-button::after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(
            to right,
            var(--primary-color-300),
            transparent
          );
          z-index: 0;
          transform: scaleX(0);
          transform-origin: left;
          transition-duration: 0.5s;
        }

        .open-answer-button:hover::after {
          transform: scaleX(1);
        }
      }
    }
  }
}