/* stylelint-enable */

.pf-c-about-modal-box {
  z-index: 600;
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: -webkit-max-content -webkit-max-content auto;
  grid-template-rows: -webkit-max-content -webkit-max-content auto;
  -ms-grid-rows: max-content max-content auto;
  grid-template-rows: max-content max-content auto;
      grid-template-areas: "brand close" "header header" "content content";
  width: 100vw;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #030303;
  box-shadow: 0 0 100px 0 rgba(255, 255, 255, .05); }

@media only screen and (min-width: 992px) {

  .pf-c-about-modal-box {
  height: 47.625rem; } }

@media only screen and (min-width: 992px) {

  .pf-c-about-modal-box {
  width: calc(100% - (4rem * 2)); } }
  @media only screen and (min-width: 576px) {
    .pf-c-about-modal-box {
      -ms-grid-columns: 5fr 1fr;
      grid-template-columns: 5fr 1fr;
          grid-template-areas: "brand          hero" "header         hero" "content        hero"; } }
  @media only screen and (min-width: 992px) {
    .pf-c-about-modal-box {
      -ms-grid-columns: 1fr .6fr;
      grid-template-columns: 1fr .6fr;
      grid-template-rows: -webkit-max-content -webkit-max-content auto;
      -ms-grid-rows: -webkit-max-content -webkit-max-content auto;
      -ms-grid-rows: max-content max-content auto;
      grid-template-rows: max-content max-content auto;
      max-width: 77rem;
      max-height: calc(100% - 2rem); }
    .pf-c-about-modal-box > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1; }
    .pf-c-about-modal-box > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 2; }
    .pf-c-about-modal-box > *:nth-child(3) {
    -ms-grid-row: 2;
    -ms-grid-column: 1; }
    .pf-c-about-modal-box > *:nth-child(4) {
    -ms-grid-row: 2;
    -ms-grid-column: 2; }
    .pf-c-about-modal-box > *:nth-child(5) {
    -ms-grid-row: 3;
    -ms-grid-column: 1; }
    .pf-c-about-modal-box > *:nth-child(6) {
    -ms-grid-row: 3;
    -ms-grid-column: 2; } }

.pf-c-about-modal-box__brand {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: brand;
  display: flex;
  padding: 3rem 4rem 4rem 4rem; }

.pf-c-about-modal-box__brand-image {
  height: 2.5rem; }

.pf-c-about-modal-box__header {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: header;
  display: flex;
  flex-direction: column;
  padding-right: 4rem;
  padding-bottom: 0.5rem;
  padding-left: 4rem; }

.pf-c-about-modal-box__header-strapline {
  padding-bottom: 1rem; }

.pf-c-about-modal-box__content {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: content;
  margin: 4rem 4rem 4rem 4rem;
  overflow-x: hidden;
  overflow-y: auto;
  -ms-scroll-chaining: none;
      overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; }
  @media screen and (min-width: 576px) {
    .pf-c-about-modal-box__content {
      overflow: visible;
      -ms-scroll-chaining: chained;
          overscroll-behavior: auto; } }

.pf-c-about-modal-box__close {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: close;
  z-index: 600;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-top: 3rem;
  padding-right: 4rem;
  padding-bottom: 4rem; }
  @media only screen and (min-width: 576px) {
    .pf-c-about-modal-box__close {
      -ms-grid-row: 1;
      -ms-grid-column: 2;
      grid-area: 1 / 2;
      justify-content: center; } }
  @media only screen and (min-width: 992px) {
    .pf-c-about-modal-box__close {
      justify-content: flex-end; } }
  .pf-c-about-modal-box__close .pf-c-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(1.3125rem * 2);
    height: calc(1.3125rem * 2);
    font-size: 1.3125rem;
    color: #fff;
    background-color: rgba(3, 3, 3, 0.4);
    border-radius: 30em; }
  .pf-c-about-modal-box__close .pf-c-button:hover {
    background-color: rgba(3, 3, 3, 0.4); }

.pf-c-about-modal-box__hero {
  display: none;
  overflow: hidden; }
  @media only screen and (min-width: 576px) {
    .pf-c-about-modal-box__hero {
      display: block;
      grid-area: hero; } }
  @media only screen and (min-width: 576px) {
    .pf-c-about-modal-box__brand {
    -ms-grid-row: 1;
    -ms-grid-column: 1; }
    .pf-c-about-modal-box__header {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1; }
    .pf-c-about-modal-box__content {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1; }
    .pf-c-about-modal-box__hero {
    -ms-grid-row: 1;
    -ms-grid-row-span: 3;
    -ms-grid-column: 2; } }

.pf-c-about-modal-box__hero-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover; }
