/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */
.quote {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-evenly;
  padding-inline: 84px;
  padding-block: 64px;
}
.quote__media {
  display: flex;
  justify-content: center;
  width: 100%;
  height: auto;
  max-width: 40%;
}
@media (max-width: 767px) {
  .quote__media {
    max-width: 50%;
  }
}
.quote-image-wrapper {
  width: 220px;
  height: 220px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.quote-image-wrapper div {
  width: 100%;
  height: 100%;
}
.quote-image-wrapper img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.quote-info {
  width: 100%;
  max-width: 60%;
  height: auto;
  position: relative;
  --animation-duration: 0.75s;
}
.quote-info__text {
  width: 100%;
  height: auto;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
}
@media (max-width: 767px) {
  .quote-info__text {
    flex-direction: column;
  }
}
.quote-info div {
  width: fit-content;
  height: auto;
}
.quote-info p::after {
  content: '"';
}
.quote-info__byline {
  margin-top: 36px;
  padding-left: 62px;
  font-family: "IBM Plex Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 21px;
  letter-spacing: -0.176px;
}
@media (max-width: 767px) {
  .quote-info__byline {
    padding-left: 0px;
  }
}
.quote .big-quote {
  width: 54px;
  height: 48px;
  display: block;
}
.quote .big-quote svg {
  width: 100%;
  height: 100%;
}
@media (max-width: 767px) {
  .quote {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 56px;
    padding-bottom: 56px;
    justify-content: flex-start;
    row-gap: 32px;
  }
  .quote .quote-image-wrapper {
    width: 100%;
    height: auto;
  }
  .quote .quote-info {
    max-width: 100%;
    height: auto;
  }
}
.snowdog-text .quote .big-quote svg path {
  fill: var(--snowdog);
}
.snowdog-text .quote h1, .snowdog-text .quote h2, .snowdog-text .quote h3, .snowdog-text .quote h4, .snowdog-text .quote h5, .snowdog-text .quote h6, .snowdog-text .quote p, .snowdog-text .quote li {
  color: var(--snowdog);
}
.blacklab-text .quote .big-quote svg path {
  fill: var(--black);
}
.blacklab-text .quote h1, .blacklab-text .quote h2, .blacklab-text .quote h3, .blacklab-text .quote h4, .blacklab-text .quote h5, .blacklab-text .quote h6, .blacklab-text .quote p, .blacklab-text .quote li {
  color: var(--black);
}
.whimper-text .quote .big-quote svg path {
  fill: var(--whimper);
}
.whimper-text .quote h1, .whimper-text .quote h2, .whimper-text .quote h3, .whimper-text .quote h4, .whimper-text .quote h5, .whimper-text .quote h6, .whimper-text .quote p, .whimper-text .quote li {
  color: var(--whimper);
}
.slobber-text .quote .big-quote svg path {
  fill: var(--slobber);
}
.slobber-text .quote h1, .slobber-text .quote h2, .slobber-text .quote h3, .slobber-text .quote h4, .slobber-text .quote h5, .slobber-text .quote h6, .slobber-text .quote p, .slobber-text .quote li {
  color: var(--slobber);
}
.drool-text .quote .big-quote svg path {
  fill: var(--drool);
}
.drool-text .quote h1, .drool-text .quote h2, .drool-text .quote h3, .drool-text .quote h4, .drool-text .quote h5, .drool-text .quote h6, .drool-text .quote p, .drool-text .quote li {
  color: var(--drool);
}
.waterbowl-text .quote .big-quote svg path {
  fill: var(--waterbowl);
}
.waterbowl-text .quote h1, .waterbowl-text .quote h2, .waterbowl-text .quote h3, .waterbowl-text .quote h4, .waterbowl-text .quote h5, .waterbowl-text .quote h6, .waterbowl-text .quote p, .waterbowl-text .quote li {
  color: var(--waterbowl);
}
.booger-text .quote .big-quote svg path {
  fill: var(--booger);
}
.booger-text .quote h1, .booger-text .quote h2, .booger-text .quote h3, .booger-text .quote h4, .booger-text .quote h5, .booger-text .quote h6, .booger-text .quote p, .booger-text .quote li {
  color: var(--booger);
}
.mange-text .quote .big-quote svg path {
  fill: var(--mange);
}
.mange-text .quote h1, .mange-text .quote h2, .mange-text .quote h3, .mange-text .quote h4, .mange-text .quote h5, .mange-text .quote h6, .mange-text .quote p, .mange-text .quote li {
  color: var(--mange);
}
.rabies-text .quote .big-quote svg path {
  fill: var(--rabies);
}
.rabies-text .quote h1, .rabies-text .quote h2, .rabies-text .quote h3, .rabies-text .quote h4, .rabies-text .quote h5, .rabies-text .quote h6, .rabies-text .quote p, .rabies-text .quote li {
  color: var(--rabies);
}
.treat-text .quote .big-quote svg path {
  fill: var(--treat);
}
.treat-text .quote h1, .treat-text .quote h2, .treat-text .quote h3, .treat-text .quote h4, .treat-text .quote h5, .treat-text .quote h6, .treat-text .quote p, .treat-text .quote li {
  color: var(--treat);
}
.kibble-text .quote .big-quote svg path {
  fill: var(--kibble);
}
.kibble-text .quote h1, .kibble-text .quote h2, .kibble-text .quote h3, .kibble-text .quote h4, .kibble-text .quote h5, .kibble-text .quote h6, .kibble-text .quote p, .kibble-text .quote li {
  color: var(--kibble);
}
/*# sourceMappingURL=quote.css.map */