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

$comp-ref-box-pd: $space-xs;
$comp-ref-box-bc: $col-bg;
$comp-ref-box-col: $gray600;
$comp-ref-box-br: 16px;
$comp-ref-box-bs: 0px 0px 0px 0px rgba(75, 111, 129, 0.1), 0px 4px 8px 0px rgba(75, 111, 129, 0.1), 0px 15px 15px 0px rgba(75, 111, 129, 0.09), 0px 34px 20px 0px rgba(75, 111, 129, 0.05),
  0px 60px 24px 0px rgba(75, 111, 129, 0.01), 0px 94px 26px 0px rgba(75, 111, 129, 0);

.component-references {
  padding: $space-lg 0;
  background-color: #d2d4bc;
  .row {
    align-items: center;
  }
  .row-head {
    text-align: center;
    margin-bottom: $space-md;
    @include bp("md") {
      text-align: left;
    }
    h2 {
      color: $col-sec;
    }
  }
  .references-slider {
    padding: 1rem 0 $space-lg;
    .reference-box {
      padding: $comp-ref-box-pd;
      background-color: $comp-ref-box-bc;
      border-radius: $comp-ref-box-br;
      box-shadow: $comp-ref-box-bs;
      color: $comp-ref-box-col;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .content-box {
        h4 {
          margin-bottom: $space-xs;
        }
      }
      .author-box {
        display: flex;
        align-items: center;
        .author-image {
          flex: 1 0 48px;
          max-width: 48px;
          margin-right: $space-xs;
          picture img {
            border-radius: 100px;
          }
        }
        .author-content {
          .small {
            margin-bottom: 0;
          }
        }
      }
    }
  }
  .dots {
    bottom: -calc(#{$space-md});
    .dot {
      background-color: $gray300;
      &.active {
        background-color: $white;
      }
    }
  }
}

.component-references .references-slider .reference-box .author-box .author-image picture img {
  height: auto;
}
