/*
 * Custom layout utility classes.
 */

/* Applied to the Mike and Andy section in the /about page. */
.layout--about-bio {
  @container (width <=600px) {
    margin-bottom: var(--spacing-component-internal);

    .layout-dynamic__layout--33-33-33 {
      > :nth-child(2) {
        order: -1;
      }
    }
  }

  @container (600px < width <=800px) {
    margin-bottom: var(--spacing-component-internal);

    .layout-dynamic__layout--33-33-33 {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      grid-template-rows: auto auto;

      > :nth-child(1) {
        grid-column: 2;
        grid-row: 1;
      }

      > :nth-child(2) {
        grid-column: 1;
        grid-row: 1;
      }

      > :nth-child(3) {
        grid-column: 1 / -1;
        grid-row: 2;
      }
    }
  }

  &+& {
    @container (width > 800px) {
      .layout-dynamic__layout--33-33-33 {
        > :nth-child(1) {
          order: 2;
        }

        > :nth-child(3) {
          order: -1;
        }
      }
    }
  }
}