.custom-faq {
  .custom-faq__container {
    display: flex;
    border-radius: 10px;
    overflow: hidden;
    flex-direction: column;

    @media screen and (min-width: 1000px) {
      flex-direction: row;
    }

    .custom-faq__image,
    .custom-faq__content {
      flex: 1;
    }
    
    .custom-faq__image {
      aspect-ratio: 335/258;
      overflow: hidden;
      display: flex;
      height: 100%;

      @media screen and (min-width: 1000px) {
        aspect-ratio: unset;
        height: auto;
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }
    }

    .custom-faq__content {

      .custom-faq__content-inner {
        padding: 20px;
        position: relative;
        
        @media screen and (min-width: 1000px) {
          padding: 72px 8px 28px 50px;
          height: 100%;
        }
      }

      .custom-faq__title {
        font-family: var(--heading-font-family);
        font-weight: 600;
        font-size: 30px;
        line-height: 140%;
        color: var(--text-color-1);
        margin-bottom: 16px;

        @media screen and (min-width: 1000px) {
          font-size: 36px;
          margin-bottom: 24px;
        }
      }

      .accordions {
        overflow-y: scroll;
        overflow-x: hidden;

        @media screen and (min-width: 1000px) {
          padding-right: 42px;

          &:has(.accordion__details[open]) {
            &::-webkit-scrollbar {
              background-color: #fff;
            }
          }
        }

        &::-webkit-scrollbar {
          width: 4px;
          background-color: transparent;
        }
        
        &::-webkit-scrollbar-thumb {
          background-color: var(--button-primary);
          border-radius: 100px;
        }
      }

      .accordion {
        &:first-child {
          border-top: none;
        }

        .accordion__content{
          display: grid;
          grid-template-rows: 0fr;
          transition-duration: 0.3s;
          margin: 0;
          padding: 0;
        }
        
        .accordion__content-body{
          overflow: hidden;
        }

        .accordion__details[open] svg {
          path:first-child {
            opacity: 0;
          }
        }
        
        .accordion__details[open] + .accordion__content{
          grid-template-rows: 1fr;

          .accordion__content-body {
            padding-bottom: 24px;

            @media screen and (min-width: 1000px) {
              padding-bottom: 16px;
            }
          }
        }

        .accordion__summary {
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 16px;
          padding: 12px 0;
          cursor: pointer;

          @media screen and (min-width: 1000px) {
            padding: 16px 0;
          }

          svg path{
            transition: opacity 0.1s;
          }
        }

        .accordion__title {
          font-weight: 700;
          font-size: 16px;
          line-height: 140%;
          color: #232936;
        }
      }

    }
  }
}