@layer pages {
  #intro {
    font-weight: 600;
    column-count: 2;
    column-gap: 2em;
    column-width: 25ch;

    p:not(:last-child) {
      margin-block-end: 1em;
    }
  }

  main {
    overflow-x: clip;
  }

  #our-space {
    padding-block: var(--section-padding);
    row-gap: var(--space-xl);
    position: relative;
    --shape-border: 0.2rem solid var(--theme-color-accent);
    --shape-border-radius: 3rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);

    h2 {
      text-align: center;
      text-shadow: 0em 0em 0px var(--theme-color-primary),
        -0.1em 0.1em 0px rgba(0, 0, 0, 0.1);
    }

    #space-gallery {
      position: relative;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-l);

      @media (width > 44rem) {
        display: grid;
        gap: var(--space-xl);
        grid-template-columns: 1fr 1fr;
        padding-block-end: var(--space-2xl);
        margin-block-end: var(--space-l);
      }

      figure {
        will-change: filter;
        &:first-child {
          @media (width <= 44rem) {
            grid-column: 1 / span 2;
          }

          &::before,
          &::after {
            position: absolute;
            inset: -1rem;
            content: "";
            display: block;
            border: var(--shape-border);
            border-radius: var(--shape-border-radius);
            z-index: -1;

            @media (width > 44rem) {
              inset: 0 -1rem;
            }
          }

          &::after {
            border-color: var(--color-purple-40);
            rotate: 2deg;
            @media (width > 44rem) {
              rotate: 5deg;
            }
          }
        }

        &:nth-child(2) {
          @media (width <= 44rem) {
            grid-column: 1 / span 2;
          }
        }

        @media (width > 44rem) {
          &:nth-child(1) {
            grid-row: 1 / span 2;
          }
          &:nth-child(4) {
            grid-row: 2 / span 2;
          }
        }
      }

      img {
        rotate: var(--rotation);
        border-radius: 15%;
        object-fit: cover;
        aspect-ratio: 1.2;
        filter: drop-shadow(-0.5rem 0.5rem 0 hsla(0, 0%, 0%, 0.2));
        inline-size: 100%;

        figure:nth-child(2) & {
          aspect-ratio: 2;
        }

        @media (width > 44rem) {
          figure:nth-child(2) &,
          figure:nth-child(3) & {
            aspect-ratio: 2;
          }
          figure:nth-child(4) & {
            aspect-ratio: 1.2;
          }
        }
      }

      &::before {
        content: "";
        display: block;
        position: absolute;
        inset: -1rem;
        border: var(--shape-border);
        border-radius: var(--shape-border-radius);
        border-color: var(--theme-color-primary);
        rotate: -2deg;
        z-index: -1;
        pointer-events: none;
        @media (width > 44rem) {
          inset: 2rem;
          rotate: -5deg;
        }
      }
    }
  }
}
/* Pages layer end */