@import "variables";
@import "mixins";

section.component-quote {
  overflow-y: visible;
  overflow-x: clip;
  .quote-wrap {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    max-width: 80%;
    margin: 0 auto;
    @include bp("md") {
      max-width: 100%;
    }
    blockquote {
      font-family: $font-family;
      font-size: 2rem;
      font-weight: $fw-regular;
      line-height: 190%;
      position: relative;
      &::before {
        content: url(theme-url("/assets/icons/quote-mark.svg"));
        position: absolute;
        left: 0;
        top: 0;
        transform: translate(-130%, -50%);
        @include bp("md") {
          content: none;
        }
      }
      &::after {
        content: url(theme-url("/assets/icons/quote-mark.svg"));
        position: absolute;
        right: 0;
        bottom: 0;
        transform: translate(130%, 50%);
        @include bp("md") {
          content: none;
        }
      }
    }
    .autor-wrap {
      display: flex;
      gap: 2rem;
      align-items: center;
      .autor-avatar {
        img {
          max-width: 48px;
          height: auto;
        }
        .thumbnail-avatar {
          max-width: 48px;
          min-width: 48px;
          height: 48px;
          background-color: $gray200;
          border-radius: 100%;
        }
      }
      .autor-info {
        p {
          margin-bottom: 0;
          font-size: 1.6rem;
          font-weight: $fw-regular;
          letter-spacing: 0em;
          line-height: 140%;
          &.autor-desc {
            font-size: 1.4rem;
            opacity: 0.8;
          }
        }
      }
    }
  }
}
