.quote {
  margin: var(--g-pink) auto;
  max-width: var(--max-width);
  padding: 0 var(--g-side);
  box-sizing: border-box;
}

@media (max-width: 750px) {
  .quote {
    padding: 0;
  }
}

.quote__wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10rem;
  padding: var(--g-yellow);
  background-color: var(--brown);
}


@media (max-width: 1280px) {
  .quote__wrapper {
    gap: 5rem;
  }
}

@media (max-width: 750px) {
  .quote__wrapper {
    padding: var(--g-yellow) var(--g-side);
    gap: var(--g-yellow);
    grid-template-columns: 1fr;
  }
}

.quote__media {
  position: relative;
  width: fit-content;
  height: fit-content;
}

@media (max-width: 750px) {
  .quote__media {
    width: 80%;
  }
}

.quote__media-copr {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

.quote__quote-icon {
  position: absolute;
  top: -33px;
  right: -33px;
}

@media (max-width: 750px) {
  .quote__quote-icon {
    max-width: 55px;
    top: -20px;
    right: -20px;
  }
}

.quote__media img {
  display: block;
}

@media (min-width: 751px) {
  .quote__media img {
    margin-left: auto;
  }
}


@media (min-width: 751px) {
  .quote__content {
    max-width: 435px;
  }
}

.quote__quote {
  width: 100%;
  font: var(--grande);
}

.quote__meta {
  font: var(--demi);
  font-weight: 400;
  margin-top: var(--g-red);
}