[data-component-id="usfq_theme:section_mosaic"] {
  width: 100%;

  @media (min-width: 1025px) {
    min-height: 100vh;
  }

  .section-mosaic__header {
    margin-bottom: 2rem;
    padding: 2rem;
  }

  .section-mosaic__grid {
    container-type: inline-size;
  }

  .section-mosaic__grid::after {
    content: '';
    display: block;
    clear: both;
  }

  .section-mosaic__gutter {
    width: 0.5rem;
  }

  .section-mosaic__sizer,
  .mosaic-item {
    width: 100%;
  }

  .mosaic-item {
    float: left;
    margin-bottom: 0.5rem;
  }

  .mosaic-item img {
    display: block;
    width: 100%;
    height: auto;
  }

  @container (min-width: 600px) {

    .section-mosaic__sizer,
    .mosaic-item {
      width: calc((100% - 0.5rem) / 2);
    }
  }

  @container (min-width: 900px) {

    .section-mosaic__sizer,
    .mosaic-item {
      width: calc((100% - 2 * 0.5rem) / 3);
    }
  }

  @container (min-width: 1200px) {

    .section-mosaic__sizer,
    .mosaic-item {
      width: calc((100% - 3 * 0.5rem) / 4);
    }
  }
}