.block-pages {
  container-type: inline-size;
  container-name: pages;
}
.block-pages .wrapper-pages {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--size-10);
}
@container pages (width < 1180px) {
  .block-pages .wrapper-pages {
    grid-template-columns: repeat(6, 1fr);
  }
}
@container pages (width < 860px) {
  .block-pages .wrapper-pages {
    grid-template-columns: repeat(4, 1fr);
  }
}
@container pages (width < 520px) {
  .block-pages .wrapper-pages {
    grid-template-columns: repeat(2, 1fr);
  }
}
.block-pages .wrapper-pages .wrap-page {
  display: flex;
  overflow: hidden;
  background-color: var(--ms-foreground);
  grid-column: span 2;
  aspect-ratio: 4/3;
}
.block-pages .wrapper-pages .wrap-page:after, .block-pages .wrapper-pages .wrap-page:before {
  content: "";
  display: block;
  width: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  transition: var(--animation-property-all) var(--timing-short) var(--animation-cubic);
  opacity: 0;
  border-radius: 50%;
  filter: blur(4px);
  aspect-ratio: 1;
}
.block-pages .wrapper-pages .wrap-page:before {
  background: var(--ms-radial-background-alpha-20-0), var(--ms-color-noir-alpha-10);
}
.block-pages .wrapper-pages .wrap-page:after {
  background: var(--ms-radial-background-alpha-75-0);
}
@container pages (width < 1920px) {
  .block-pages .wrapper-pages .wrap-page {
    aspect-ratio: 1;
  }
}
.block-pages .wrapper-pages .wrap-page:hover:before, .block-pages .wrapper-pages .wrap-page:focus-visible:before {
  width: 150%;
  opacity: 1;
}
.block-pages .wrapper-pages .wrap-page:hover img, .block-pages .wrapper-pages .wrap-page:focus-visible img {
  transform: scale(1.3);
}
.block-pages .wrapper-pages .wrap-page:hover .page-subtitle, .block-pages .wrapper-pages .wrap-page:focus-visible .page-subtitle {
  transition: var(--ms-transition-transform-medium-cubic);
  transform: translateY(0);
}
.block-pages .wrapper-pages .wrap-page:focus-visible {
  outline-width: var(--size-5);
}
.block-pages .wrapper-pages .wrap-page:active:after {
  width: 150%;
  opacity: 1;
}
.block-pages .wrapper-pages .wrap-page img {
  width: 100%;
  height: 100%;
  max-width: inherit;
  object-fit: cover;
  object-position: center;
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  transition: var(--ms-transition-transform-medium-cubic);
}
.block-pages .wrapper-pages .wrap-page .page-wrapper {
  z-index: var(--z-index-abover);
  padding: var(--size-30) var(--size-12);
  font-weight: var(--font-weight-semibold);
  color: var(--ms-foreground-reverse);
}
.block-pages .wrapper-pages .wrap-page .page-title {
  font-size: var(--size-32);
  text-transform: uppercase;
  text-wrap: balance;
  margin-block: auto;
  padding-block-start: 19px;
}
.block-pages .wrapper-pages .wrap-page .page-subtitle {
  font-size: var(--size-16);
  transition: var(--ms-transition-transform-medium-cubic);
  transform: translateY(60px);
  text-wrap: balance;
}

/*# sourceMappingURL=block-pages.css.map */