@import "../../shared/variables.css";
@import "../../shared/reset.css";
@import "../../shared/layout.css";
@import "../../shared/typography.css";
@import "../../shared/buttons.css";
@import "../../shared/modal.css";
@import "../../shared/animations.css";
@import "../home/blocks/header.css";
@import "../catalog/blocks/hero.css";
@import "./blocks/manifest.css";
@import "./blocks/brand.css";
@import "./blocks/import.css";
@import "./blocks/values.css";
@import "../home/blocks/cta-request.css";
@import "../home/blocks/footer.css";

.about-page {
  background: var(--color-paper);
}

.about-page .catalog-hero__title-accent {
  color: var(--color-red-bright);
}

@media (min-width: 1024px) {
  .about-page .catalog-hero__layout {
    align-items: start;
  }

  .about-page .catalog-hero__media {
    justify-self: end;
    align-self: start;
    width: min(100%, 550px);
    max-width: 550px;
    aspect-ratio: 1 / 1;
    min-height: 0;
    height: auto;
    max-height: 550px;
  }
}

@media (min-width: 485px) and (max-width: 767px) {
  .about-page .catalog-hero__media {
    min-height: 400px;
    height: 400px;
  }

  .about-page .catalog-hero__image {
    object-position: center top;
  }
}