chrome/browser/resources/new_tab_page/modules/history_clusters/module.html

<style>
  :host {
    width: 100%;
    --gap-size: 12px;
  }

  :host-context(.focus-outline-visible) #showAllButton:focus,
  #showAllButton:focus-visible {
    box-shadow: var(--ntp-focus-shadow);
    outline: none;
  }

  #showAllButton {
    background-color: var(--color-new-tab-page-module-background);
    border: none;
    color: var(--color-new-tab-page-link);
    cursor: pointer;
    font-size: var(--ntp-module-text-size);
  }

  .small-tiles {
    display: flex;
    flex-direction: row;
    gap: var(--gap-size);
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }

  .layout {
    display: grid;
    grid-gap: var(--gap-size) var(--gap-size);
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    padding: 0 16px 16px;
  }

  .main-tile {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
  }

  .secondary-tile {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }

  .related-searches-tile {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }

  /* Set styles for high contrast mode in Windows. */
  @media (forced-colors: active) {
    /* Set focus outline since box-shadow isn't visible in hcm */
    :host-context(.focus-outline-visible) #showAllButton:focus,
    #showAllButton:focus-visible {
      outline: var(--cr-focus-outline-hcm);
    }
  }

  /* At less than 768px + 2*18px side gaps, switch to the one column
     presentation. */
  @media (max-width: 803px) {
    .small-tiles,
    .secondary-tile,
    .related-searches-tile {
      display: none;
    }

    .layout {
      display: block;
    }

    .main-tile {
      min-height: 100%;
    }
  }

  #layout3 .main-tile {
    display: flex;
    flex-direction: column;
    gap: var(--gap-size);
  }
</style>
<div id="content">
  <ntp-module-header
      disable-text="[[i18nRecursive('',
                                  'modulesDisableButtonText',
                                  'modulesJourneyDisable')]]"
      dismiss-text="[[i18n('modulesDismissButtonText', cluster.label)]]"
      show-info-button show-dismiss-button
      on-disable-button-click="onDisableButtonClick_"
      on-dismiss-button-click="onDismissButtonClick_"
      on-info-button-click="onInfoButtonClick_"
      icon-src="chrome://resources/images/icon_journeys.svg">
    [[i18n('modulesJourneysResumeJourney', cluster.label)]]
    <button id="showAllButton" type="button" on-click="onShowAllClick_"
        slot="title-actions"
        aria-label$="[[i18n('modulesJourneysShowAllAcc', cluster.label)]]">
      [[i18n('modulesJourneysShowAll')]]
    </button>
    <button id="openAllInTabGroupButton" class="dropdown-item"
        on-click="onOpenAllInTabGroupClick_"
        slot="action-menu-items" type="button">
      [[i18n('modulesJourneysOpenAllInNewTabGroupButtonText')]]
    </button>
  </ntp-module-header>
  <template is="dom-if" if="[[isLayout_(1, layoutType)]]" restamp>
    <div id="layout1" class="layout">
      <ntp-history-clusters-tile class="main-tile" large-format
          visit="[[cluster.visits.0]]" on-click="onVisitTileClick_"
          on-aux-click="onVisitTileClick_">
      </ntp-history-clusters-tile>
      <template is="dom-if" if="[[shouldShowCartTile_(cart)]]" restamp>
        <ntp-history-clusters-cart-tile
            id="cartTile" cart="[[cart]]" class="secondary-tile"
            on-click="onCartTileClick_" on-aux-click="onCartTileClick_">
        </ntp-history-clusters-cart-tile>
      </template>
      <template is="dom-if" if="[[!shouldShowCartTile_(cart)]]" restamp>
        <ntp-history-clusters-tile class="secondary-tile" medium-format
            visit="[[cluster.visits.1]]" on-click="onVisitTileClick_"
            on-aux-click="onVisitTileClick_">
        </ntp-history-clusters-tile>
      </template>
      <ntp-history-clusters-suggest-tile class="related-searches-tile"
          related-searches="[[cluster.relatedSearches]]"
          on-click="onSuggestTileClick_" on-aux-click="onSuggestTileClick_">
      </ntp-history-clusters-suggest-tile>
    </div>
  </template>
  <template is="dom-if" if="[[isLayout_(2, layoutType)]]" restamp>
    <div id="layout2" class="layout">
      <ntp-history-clusters-tile class="main-tile" large-format
          visit="[[cluster.visits.0]]" on-click="onVisitTileClick_"
          on-aux-click="onVisitTileClick_">
      </ntp-history-clusters-tile>
      <template is="dom-if" if="[[shouldShowCartTile_(cart)]]" restamp>
        <ntp-history-clusters-cart-tile
            id="cartTile" cart="[[cart]]" class="secondary-tile"
            on-click="onCartTileClick_" on-aux-click="onCartTileClick_">
        </ntp-history-clusters-cart-tile>
      </template>
      <template is="dom-if" if="[[!shouldShowCartTile_(cart)]]" restamp>
        <div class="small-tiles">
          <ntp-history-clusters-tile small-format visit="[[cluster.visits.1]]"
              on-click="onVisitTileClick_" on-aux-click="onVisitTileClick_">
          </ntp-history-clusters-tile>
          <ntp-history-clusters-tile small-format visit="[[cluster.visits.2]]"
              on-click="onVisitTileClick_" on-aux-click="onVisitTileClick_">
          </ntp-history-clusters-tile>
        </div>
      </template>
      <ntp-history-clusters-suggest-tile class="related-searches-tile"
          related-searches="[[cluster.relatedSearches]]"
          on-click="onSuggestTileClick_" on-aux-click="onSuggestTileClick_">
      </ntp-history-clusters-suggest-tile>
    </div>
  </template>
  <template is="dom-if" if="[[isLayout_(3, layoutType)]]" restamp>
    <div id="layout3" class="layout">
      <div class="main-tile">
        <ntp-history-clusters-tile medium-format visit="[[cluster.visits.0]]"
            on-click="onVisitTileClick_" on-aux-click="onVisitTileClick_">
        </ntp-history-clusters-tile>
        <ntp-history-clusters-tile medium-format visit="[[cluster.visits.1]]"
            on-click="onVisitTileClick_" on-aux-click="onVisitTileClick_">
        </ntp-history-clusters-tile>
      </div>
      <template is="dom-if" if="[[shouldShowCartTile_(cart)]]" restamp>
        <ntp-history-clusters-cart-tile
            id="cartTile" cart="[[cart]]" class="secondary-tile"
            on-click="onCartTileClick_" on-aux-click="onCartTileClick_">
        </ntp-history-clusters-cart-tile>
      </template>
      <template is="dom-if" if="[[!shouldShowCartTile_(cart)]]" restamp>
        <div class="small-tiles">
          <ntp-history-clusters-tile small-format visit="[[cluster.visits.2]]"
              on-click="onVisitTileClick_" on-aux-click="onVisitTileClick_">
          </ntp-history-clusters-tile>
          <ntp-history-clusters-tile small-format visit="[[cluster.visits.3]]"
              on-click="onVisitTileClick_" on-aux-click="onVisitTileClick_">
          </ntp-history-clusters-tile>
        </div>
      </template>
      <ntp-history-clusters-suggest-tile class="related-searches-tile"
          related-searches="[[cluster.relatedSearches]]"
          on-click="onSuggestTileClick_" on-aux-click="onSuggestTileClick_">
      </ntp-history-clusters-suggest-tile>
    </div>
  </template>
</div>
<cr-lazy-render id="infoDialogRender">
  <template>
    <ntp-info-dialog inner-h-t-m-l="[[i18nAdvanced('modulesJourneysInfo')]]">
    </ntp-info-dialog>
  </template>
</cr-lazy-render>