.paragraph--type--quote-no-image .v-quote,
.paragraph--type--quote-no-image.v-quote {
  padding-top: 8.2rem;
}

.paragraph--type--quote-no-image .v-quote__image {
  display: none;
}

.v-quote {
  padding: 1.6rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.2rem;
  box-shadow: var(--box-shadow);
  background: var(--color-white);
  width: 100%;

  @media only screen and (min-width: 768px) {
    align-items: center;
    gap: 1.6rem;
    padding: 3.2rem;
  }
}

.v-quote__decoration {
  position: absolute;
  inset: 0 0 auto auto;

  &:before {
    content: url("../../images/quote-mobile.svg");
  }

  @media only screen and (min-width: 768px) {
    inset: 0 auto auto 0;

    &:before {
      content: url("../../images/quote.svg");
    }
  }
}

.v-quote__image {
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 0.4rem;

  @media only screen and (min-width: 768px) {
    width: 10.4rem;
    height: 10.4rem;
    margin-bottom: 1.6rem;
  }

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

.v-quote__title {
  color: #121212;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 125%;

  @media only screen and (min-width: 768px) {
    font-size: 2.2rem;
  }
}

.v-quote__info {
  color: #454545;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 26px;
  margin-top: auto;

  @media only screen and (min-width: 768px) {
    font-size: 1.8rem;
  }
}

.v-quote__title,
.v-quote__info {
  @media only screen and (min-width: 768px) {
    text-align: center;
  }
}

.v-quote__author {
  display: block;

  > * {
    display: inline;
  }

  @media only screen and (min-width: 768px) {
    display: inline;
  }
}

.v-quote__role {
  > * {
    display: inline;
  }

  @media only screen and (min-width: 768px) {
    text-align: center;
  }
}

.v-quote__role.no-title {
  &::before {
    content: '- ';
  }

  > span {
    display: none;
  }
}