.quote-group {
  .quote-row {
    display: flex;
    justify-content: center;

    .quote {
      align-self: center;

      width: 100%;
      max-width: calculateRem(900);
      &.long-quote {
        .container {
          .top {
            .q {
              font-size: calculateRem(30);
              line-height: calculateRem(40);
              font-weight: 500;
            }
          }
          .bottom {
            & > span {
              @include breakpoint(mobile) {
                font-size: calculateRem(20);
                line-height: calculateRem(24);
              }
              @include breakpoint(tablet) {
                font-size: calculateRem(24);
                line-height: calculateRem(30);
              }
            }
            .name {
              font-weight: 500;
            }
          }
        }
      }
      .container {
        .top {
          display: flex;
          justify-content: center;
          position: relative;

          @include breakpoint(mobile) {
            flex-direction: column;
          }
          @include breakpoint(tablet) {
            flex-direction: row;
          }

          .icon-container {
            @include breakpoint(tablet) {
              position: absolute;
            }

            &.left {
              @include breakpoint(mobileonly) {
                align-self: center;
                margin-bottom: calculateRem(50);
              }
              @include breakpoint(tablet) {
                top: calculateRem(-28);
                left: 0;
              }
            }

            &.right {
              @include breakpoint(mobileonly) {
                align-self: center;
                margin-top: calculateRem(50);
              }
              @include breakpoint(tablet) {
                right: 0;
                bottom: calculateRem(-16);
              }
            }

            i {
              font-size: calculateRem(68);

              @include breakpoint(mobileonly) {
                font-size: calculateRem(44);
              }
            }
          }
          .q {
            text-align: center;

            font-family: $header-font-family;
            font-weight: 600;
            font-size: calculateRem(64);
            line-height: calculateRem(86);

            @include breakpoint(mobileonly) {
              padding-bottom: calculateRem(10);
              font-size: calculateRem(42);
              line-height: calculateRem(64);
            }
            @include breakpoint(tablet) {
              padding-right: calculateRem(120);
              padding-left: calculateRem(120);
            }

            
          }
        }
        .bottom {
          display: flex;
          flex-flow: row wrap;

          @include breakpoint(mobile) {
            justify-content: center;
            margin-top: calculateRem(20);
          }
          @include breakpoint(tablet) {
            justify-content: flex-end;
            margin-top: calculateRem(50);
          }

          & > span {
            @include breakpoint(mobile) {
              font-size: calculateRem(24);
              line-height: calculateRem(30);
            }
            @include breakpoint(tablet) {
              font-size: calculateRem(36);
              line-height: calculateRem(48);
            }
          }

          .name {
            font-weight: 600;
          }

          .reference {
            font-style: italic;
          }
        }
      }
    }
  }
}
