.testimonial {
  background: var(--background-testimonial);
  border-color: var(--border-color-testimonial);
  border-radius: var(--border-radius-testimonial);
  border-style: solid;
  border-width: var(--border-width-testimonial);
  margin-left: var(--space-x-small-breakpoint-container);
  margin-right: var(--space-x-small-breakpoint-container);
  overflow: hidden;
  position: relative;

  .testimonial-inner {
    align-items: var(--horizontal-alignment-testimonial);
    column-gap: var(--column-gap-testimonial);
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding: var(--space-y-small-breakpoint-testimonial) var(--space-x-small-breakpoint-testimonial);
    position: relative;
    z-index: 2;
  }

  .testimonial-logo {
    margin-bottom: var(--space-y-block-small-breakpoint-testimonial-logo);

    & img,
    & svg {
      height: auto;
      width: var(--size-small-breakpoint-testimonial-logo);
    }
  }

  .testimonial-text {
    text-align: var(--horizontal-alignment-testimonial);

    & h1,
    & h2,
    & h3,
    & h4,
    & h5,
    & h6,
    & span {
      color: var(--color-testimonial-text);
      display: block;
      font-family: var(--font-text);
      font-size: var(--size-small-breakpoint-testimonial-text);
      font-weight: var(--weight-testimonial-text);
      line-height: var(--line-height-small-breakpoint-testimonial-text);
      margin-bottom: var(--space-y-block-small-breakpoint-testimonial-text);
      text-align: var(--horizontal-alignment-testimonial-name);
    }
  }

  .testimonial-name {
    & h1,
    & h2,
    & h3,
    & h4,
    & h5,
    & h6,
    & span {
      color: var(--color-testimonial-name);
      display: block;
      font-family: var(--font-text);
      font-size: var(--size-small-breakpoint-testimonial-name);
      font-weight: var(--weight-testimonial-name);
      line-height: var(--line-height-small-breakpoint-testimonial-name);
      margin-bottom: var(--space-y-block-small-breakpoint-testimonial-name);
      text-align: var(--horizontal-alignment-testimonial-name);
    }
  }

  .testimonial-function {
    text-align: var(--horizontal-alignment-testimonial-function);

    & p {
      color: var(--color-testimonial-function);
      font-size: var(--size-small-breakpoint-testimonial-function);
      font-weight: var(--weight-testimonial-function);
      line-height: var(--line-height-small-breakpoint-testimonial-function);
    }
  }

  .testimonial-image {
    height: auto;
    margin-bottom: var(--space-y-block-small-breakpoint-testimonial-image);
    width: var(--size-small-breakpoint-testimonial-image);

    & img {
      border-radius: var(--border-radius-testimonial-image);
      height: auto;
      width: 100%;
    }
  }
}

@media (width >= 768px) {
  .testimonial {
    margin-left: var(--space-x-medium-breakpoint-container);
    margin-right: var(--space-x-medium-breakpoint-container);

    .testimonial-inner {
      padding: var(--space-y-medium-breakpoint-testimonial)
        var(--space-x-medium-breakpoint-testimonial);
    }

    .testimonial-logo {
      & img,
      & svg {
        width: var(--size-medium-breakpoint-testimonial-logo);
      }

      margin-bottom: var(--space-y-block-medium-breakpoint-testimonial-logo);
    }

    .testimonial-text {
      & h1,
      & h2,
      & h3,
      & h4,
      & h5,
      & h6,
      & span {
        font-size: var(--size-medium-breakpoint-testimonial-text);
        line-height: var(--line-height-medium-breakpoint-testimonial-text);
        margin-bottom: var(--space-y-block-medium-breakpoint-testimonial-text);
      }
    }

    .testimonial-name {
      & h1,
      & h2,
      & h3,
      & h4,
      & h5,
      & h6,
      & span {
        font-size: var(--size-medium-breakpoint-testimonial-name);
        line-height: var(--line-height-medium-breakpoint-testimonial-name);
        margin-bottom: var(--space-y-block-medium-breakpoint-testimonial-name);
      }
    }

    .testimonial-function p {
      font-size: var(--size-medium-breakpoint-testimonial-function);
      line-height: var(--line-height-medium-breakpoint-testimonial-function);
    }

    .testimonial-image {
      margin-bottom: var(--space-y-block-medium-breakpoint-testimonial-image);
      width: var(--size-medium-breakpoint-testimonial-image);
    }
  }
}

@media (width >= 992px) {
  .testimonial {
    margin-left: var(--space-x-large-breakpoint-container);
    margin-right: var(--space-x-large-breakpoint-container);
    max-width: var(--max-width-container-large);

    .testimonial-inner {
      padding: var(--space-y-large-breakpoint-testimonial)
        var(--space-x-large-breakpoint-testimonial);
    }

    .testimonial-logo {
      & img,
      & svg {
        width: var(--size-large-breakpoint-testimonial-logo);
      }

      margin-bottom: var(--space-y-block-large-breakpoint-testimonial-logo);
    }

    .testimonial-text {
      & h1,
      & h2,
      & h3,
      & h4,
      & h5,
      & h6,
      & span {
        font-size: var(--size-large-breakpoint-testimonial-text);
        line-height: var(--line-height-large-breakpoint-testimonial-text);
        margin-bottom: var(--space-y-block-large-breakpoint-testimonial-text);
      }
    }

    .testimonial-name {
      & h1,
      & h2,
      & h3,
      & h4,
      & h5,
      & h6,
      & span {
        font-size: var(--size-large-breakpoint-testimonial-name);
        line-height: var(--line-height-large-breakpoint-testimonial-name);
        margin-bottom: var(--space-y-block-large-breakpoint-testimonial-name);
      }
    }

    .testimonial-function p {
      font-size: var(--size-large-breakpoint-testimonial-function);
      line-height: var(--line-height-large-breakpoint-testimonial-function);
    }

    .testimonial-image {
      margin-bottom: var(--space-y-block-large-breakpoint-testimonial-image);
      width: var(--size-large-breakpoint-testimonial-image);
    }
  }
}

@media (width >= 1200px) {
  .testimonial {
    max-width: var(--max-width-container-extralarge);
  }
}

@media (width >= 1300px) {
  .testimonial {
    margin-left: auto;
    margin-right: auto;
  }
}