@import "tailwindcss/theme";
@import "../variables/theme.css";

.partnerVoice {
  @apply flex flex-col;

  gap: var(--spacing-40);

  @variant lg {
    @apply flex-row;

    min-height: 344px;
  }
}

.partnerVoice-visual {
  @variant lg {
    flex: 1 1 50%;
  }
}

.partnerVoice-content {
  @variant lg {
    flex: 1 1 50%;
  }
}

.partnerVoice-quote {
  @apply flex flex-col font-bold italic;

  gap: var(--spacing-8);

  &::before {
    width: 32px;
    height: 23px;
    content: "";
    background: url("../../images/img-quote.png") 0 0 / 100% no-repeat;
  }

  &::after {
    align-self: flex-end;
    width: 32px;
    height: 23px;
    content: "";
    background: url("../../images/img-quote.png") 0 0 / 100% no-repeat;
    transform: scale(-1);
  }
}

.partnerVoice-author {
  padding-left: var(--spacing-36);
  margin-top: var(--spacing-16);
}

.partnerVoice-authorName {
  @apply text-blue-600;

  font: var(--h4-bold);
  font-size: var(--text-heading-sm-sm);
  line-height: var(--leading-heading-sm-sm);

  @variant md {
    font-size: var(--text-heading-md-sm);
    line-height: var(--leading-heading-md-sm);
  }

  @variant lg {
    font-size: var(--text-heading-lg-sm);
    line-height: var(--leading-heading-lg-sm);
  }
}

.partnerVoice-authorInformation {
  @apply flex justify-between;

  gap: var(--spacing-16);
  margin-top: var(--spacing-sm-3xs);

  @variant md {
    margin-top: var(--spacing-md-3xs);
  }

  @variant lg {
    margin-top: var(--spacing-lg-3xs);
  }
}

.partnerVoice-authorTitle {
  @apply flex-auto content-center;

  font: var(--t3-bold);
}

.partnerVoice-authorCompany {
  @apply object-scale-down object-top;

  width: 117px;
  height: auto;
  aspect-ratio: 117/60;
}