<div class="header-section">
  <div class="header-layout">
    <div class="breadcrumbs">
      <a href="#">Documentation</a>
      <a href="#">Responsive UI</a>
    </div>
    <h1 class="header">
      Container Query Card Header
    </h1>
    <figure class="visual">
      <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1200">
        <defs>
          <style>
            .cls-1 {
              fill: #fa4a1e;
            }

            .cls-1,
            .cls-2,
            .cls-3,
            .cls-4 {
              stroke-width: 0px;
            }

            .cls-2 {
              fill: #7a0b6f;
            }

            .cls-3 {
              fill: #fff;
            }

            .cls-4 {
              fill: var(--magenta);
            }
          </style>
        </defs>
        <g class="tablet">
          <path class="cls-1" d="m805.11,50.31l-396.66,1.7.23-23.89c-.06-14.66,12.48-26.6,28.01-26.66L777.11,0c15.53-.07,28.17,11.76,28.24,26.42l-.23,23.89h-.01Z" />
          <path class="cls-2" d="m842.96,67.38c-.06-14.47-11.84-26.15-26.32-26.09l-317.18,1.36c-14.47.06-26.15,11.84-26.09,26.32l-.21,23.58h.32l2.56,447.64c.05,10.58,8.66,19.12,19.24,19.07l329.75-1.41c10.58-.05,19.12-8.66,19.07-19.24l-1.15-471.22h0Z" />
          <path class="cls-3" d="m774.85,516.84l-330.14,1.41c-13.49.06-24.48-10.83-24.54-24.33l-2.59-454.15,379-1.62,2.59,454.15c.06,13.49-10.83,24.48-24.33,24.54h.01Z" />
          <path class="cls-1" d="m444.61,527.25c-18.37,0-33.35-14.9-33.43-33.29l-2.64-463.15,397-1.7,2.64,463.14c.08,18.45-14.86,33.51-33.29,33.59l-330.14,1.42h-.15.01Zm-17.96-478.51l2.53,445.14c.04,8.5,6.95,15.38,15.43,15.38h.07l330.14-1.42c8.51-.04,15.4-6.99,15.36-15.5l-2.53-445.15-361,1.55h0Z" />
          <path class="cls-1" d="m589.41,471.89h0c-5.57.01-10.08-4.22-10.07-9.45l.12-55.69c.01-5.23,4.54-9.48,10.11-9.49h0c5.57-.01,10.08,4.22,10.07,9.45l-.12,55.69c-.01,5.23-4.54,9.48-10.11,9.49Z" />
          <path class="cls-1" d="m656.82,471.75h0c-5.57.01-10.08-4.22-10.07-9.45l.12-55.69c.01-5.23,4.54-9.48,10.11-9.49h0c5.57-.01,10.08,4.22,10.07,9.45l-.12,55.69c-.01,5.23-4.54,9.48-10.11,9.49Z" />
          <path class="cls-2" d="m657,433.41h0c-26.62.05-48.16-20.16-48.1-45.15l.03-12.8c.05-24.99,21.68-45.29,48.3-45.34h0c26.62-.05,48.16,20.16,48.1,45.15l-.03,12.8c-.05,24.99-21.68,45.29-48.3,45.34Z" />
          <path class="cls-3" d="m593.11,429.74c-14.53,0-28.03-5.51-38.01-15.51-7.5-7.51-12.25-16.92-13.78-27.02-24.01-5.07-45.83-17.35-62.04-35.06-18.12-19.79-28.07-45.14-28.01-71.37.04-18.08,15.48-32.81,34.41-32.85l133.94-.26.22-99.34c.08-36.52,31.53-66.29,70.12-66.36h.15c19.41,0,37.43,7.34,50.73,20.68,12.3,12.33,19.06,28.48,19.02,45.48l-.3,134.63c-.01,5.8-.82,11.53-2.39,17.09,1.72,6.04,2.58,12.29,2.57,18.61-.09,39.15-33.83,71.06-75.21,71.14l-39.78.08c-2.08,9.82-7.23,18.82-14.97,25.94-9.85,9.07-22.83,14.09-36.55,14.11h-.12Z" />
          <path class="cls-2" d="m690.11,90.96c33.63,0,60.82,25.56,60.75,57.14l-.3,134.63c-.01,5.96-1,11.7-2.81,17.11,1.95,5.87,3,12.11,2.98,18.59h0c-.08,34.26-29.73,62.09-66.23,62.16l-47.74.09c-.55,22.15-19.85,39.99-43.57,40.04h-.09c-23.98,0-43.37-18.23-43.32-40.75v-.4c-50.86-7.57-89.63-48.88-89.52-98.79h0c.03-13.15,11.41-23.84,25.43-23.87l142.91-.28.24-108.3c.07-31.62,27.44-57.32,61.13-57.38h.13m0-18h-.15c-43.54.09-79.02,33.88-79.11,75.34l-.2,90.37-124.98.25c-23.88.05-43.34,18.81-43.39,41.83-.06,28.5,10.72,56.01,30.37,77.47,16.17,17.66,37.49,30.31,61.05,36.43,2.57,9.66,7.7,18.57,15.05,25.94,11.68,11.7,27.44,18.15,44.38,18.15h.14c15.96-.03,31.1-5.89,42.62-16.49,7.24-6.66,12.56-14.73,15.68-23.58l32.99-.07c22.23-.04,43.21-8.26,59.06-23.14,16.16-15.17,25.09-35.41,25.14-56.99.01-6.31-.74-12.55-2.26-18.64,1.37-5.58,2.07-11.29,2.08-17.06l.3-134.63c.04-19.41-7.65-37.83-21.65-51.86-15.01-15.04-35.29-23.32-57.1-23.32h-.02Z" />
          <path class="cls-1" d="m593.84,167.15h0c.02-9.62,8.35-17.43,18.59-17.45l51.35-.1c10.25-.02,18.54,7.76,18.52,17.38h0c-.02,9.62-8.35,17.43-18.59,17.45l-51.35.1c-10.25.02-18.54-7.76-18.52-17.38Z" />
          <ellipse class="cls-2" cx="707.18" cy="135.01" rx="19.96" ry="18.73" transform="translate(-4.05 23.27) rotate(-1.88)" />
          <path class="cls-4" d="m624.57,352.82l-39.03.08c-32.44.06-58.68-24.56-58.61-55.01h0c.02-9.3,8.07-16.85,17.97-16.87l79.82-.16c21.17-.04,38.3,16.03,38.25,35.9h0c-.04,19.87-17.24,36.01-38.41,36.06h.01Z" />
          <path class="cls-1" d="m637.05,469.14h0c.01-5.23,4.54-9.48,10.11-9.49l59.33-.12c5.57-.01,10.08,4.22,10.07,9.45h0c-.01,5.23-4.54,9.48-10.11,9.49l-59.33.12c-5.57.01-10.08-4.22-10.07-9.45Z" />
          <path class="cls-1" d="m564.8,469.28h0c.01-5.23,4.54-9.48,10.11-9.49l59.33-.12c5.57-.01,10.08,4.22,10.07,9.45h0c-.01,5.23-4.54,9.48-10.11,9.49l-59.33.12c-5.57.01-10.08-4.22-10.07-9.45Z" />
        </g>
        <g class="wide">
          <path class="cls-2" d="m519.5,361.47c-.03-11.21-9.14-20.28-20.35-20.26l-446.44.21c-11.21.03-20.28,9.14-20.26,20.35l-.2,18.27h.25l1.52,252.16c.02,8.2,6.68,14.83,14.88,14.81l456.18-.23c8.2-.02,14.83-6.68,14.81-14.88l-.39-270.43h0Z" />
          <path class="cls-3" d="m463.8,606.19l-435.01.22c-9.96.02-18.06-8.03-18.08-18l-1.46-253.36,471.09-.31,1.46,253.36c.02,9.96-8.03,18.06-18,18.08h0Z" />
          <path class="cls-1" d="m28.73,615.41c-14.87,0-26.99-12.09-27.02-26.98L.19,326.06l489.09-.32,1.51,262.31c.02,7.25-2.78,14.05-7.87,19.17s-11.88,7.95-19.1,7.97h-.02l-435.01.22h-.06Zm-10.44-271.36l1.41,244.31c.01,5.01,4.07,9.05,9.04,9.05h.02l435.01-.22c2.42,0,4.68-.95,6.39-2.66,1.7-1.71,2.64-3.98,2.63-6.4l-1.41-244.37-453.09.29h0Z" />
          <path class="cls-1" d="m489.98,344.01l-489.06.43L0,321.55c-.03-14.05,12.01-25.47,26.89-25.5l436.34-.3c14.88-.04,26.98,11.32,27.01,25.37l-.26,22.89Z" />
          <path class="cls-1" d="m239.21,577.43h0c-3.68,0-6.66-2.79-6.65-6.24l.1-36.77c0-3.45,3-6.26,6.68-6.26h0c3.68,0,6.66,2.79,6.65,6.24l-.1,36.77c0,3.45-3,6.26-6.68,6.26Z" />
          <path class="cls-1" d="m283.72,577.36h0c-3.68,0-6.66-2.79-6.65-6.24l.1-36.77c0-3.45,3-6.26,6.68-6.26h0c3.68,0,6.66,2.79,6.65,6.24l-.1,36.77c0,3.45-3,6.26-6.68,6.26Z" />
          <path class="cls-1" d="m270.66,576.32h0c0-3.45,3-6.26,6.68-6.26l39.18-.06c3.68,0,6.66,2.79,6.65,6.24h0c0,3.45-3,6.26-6.68,6.26l-39.18.06c-3.68,0-6.66-2.79-6.65-6.24Z" />
          <path class="cls-1" d="m222.95,576.39h0c0-3.45,3-6.26,6.68-6.26l39.18-.06c3.68,0,6.66,2.79,6.65,6.24h0c0,3.45-3,6.26-6.68,6.26l-39.18.06c-3.68,0-6.66-2.79-6.65-6.24Z" />
          <path class="cls-2" d="m285.49,552.3h0c-16.57.03-29.98-12.56-29.94-28.12l.02-7.97c.04-15.56,13.51-28.19,30.08-28.21h0c16.57-.03,29.98,12.56,29.94,28.12l-.02,7.97c-.04,15.56-13.51,28.19-30.08,28.21Z" />
          <path class="cls-3" d="m237.76,553.3c-17.88,0-32.71-11.49-36.77-27.3l-61.08.54c-21.13-.27-40.62-8.53-54.89-23.23-13.16-13.57-20.24-31.19-19.92-49.62.22-12.58,11.07-22.82,24.19-22.82l239.14-1.12.13-19.4c.17-24.43,21.25-44.31,46.99-44.31h.13c12.99.03,25.03,4.99,33.92,13.96,8.24,8.32,12.74,19.21,12.66,30.66l-.46,67.88c-.13,19.62-14.02,37.04-33.84,42.52-5.98,2.29-12.3,3.46-18.77,3.46h-.57l-93.76.83c-3.99,15.95-19.16,27.92-37.04,27.95h-.06Z" />
          <path class="cls-2" d="m375.55,374.04h.11c21.46.06,38.74,16.43,38.6,36.57l-.46,67.88c-.11,16.64-12.09,30.63-28.34,34.97-5.01,1.97-10.5,3.07-16.26,3.07h-.59l-100.72.89c-.23,15.41-13.61,27.86-30.07,27.89h-.05c-16.28,0-29.47-12.17-29.87-27.36l-67.88.6c-37.56-.49-67.52-29.46-66.92-64.72h0c.14-8.3,7.37-14.96,16.19-14.96h.23l246.86-1.16.19-27.31c.14-20.1,17.58-36.36,38.99-36.36m0-16c-30.12,0-54.79,23.44-54.99,52.25l-.08,11.49-230.92,1.09h-.27c-8.3,0-16.19,3.06-22.2,8.61-6.3,5.81-9.84,13.65-9.99,22.08-.35,20.58,7.52,40.23,22.18,55.33,15.76,16.24,37.26,25.36,60.53,25.66h.35l55.17-.49c2.4,5.61,6.03,10.73,10.73,15.05,8.57,7.87,19.83,12.2,31.71,12.2h.05c12.02-.02,23.38-4.44,32.01-12.45,4.81-4.46,8.48-9.76,10.86-15.55l87.9-.78h.62c7.33,0,14.48-1.3,21.27-3.85,10.8-3.07,20.56-9.41,27.57-17.91,7.62-9.25,11.69-20.37,11.77-32.16l.46-67.88c.09-13.59-5.23-26.5-14.98-36.35-10.39-10.49-24.45-16.29-39.58-16.33h-.17Z" />
          <path class="cls-1" d="m383.67,415.83h0c0-6.13,5.28-11.12,11.81-11.15l34.34.7c6.53-.03,11.82,4.91,11.83,11.03h0c0,6.13-5.28,11.12-11.81,11.15l-34.34-.7c-6.53.03-11.82-4.91-11.83-11.03Z" />
          <ellipse class="cls-2" cx="369.39" cy="397.85" rx="12.71" ry="11.93" transform="translate(-11.03 10.54) rotate(-1.61)" />
          <path class="cls-4" d="m324.22,497.29l-131.81,1.59c-20.66-.05-37.29-15.82-37.16-35.2h0c.04-5.92,5.19-10.71,11.5-10.69l157.79-1.52c13.48.04,24.34,10.32,24.26,22.98h0c-.09,12.65-11.09,22.88-24.57,22.85h-.01Z" />
        </g>
        <g class="tall">
          <path class="cls-2" d="m695.72,568.32l.04-11.21c-.09-9.72-8.04-17.53-17.76-17.44l-189.69.1c-9.72.09-17.53,8.04-17.44,17.76l-.06,15.84h.61v.13h-.17l.09,444.54.16,17.7c.06,6.25,5.17,11.28,11.43,11.22l207.18-.71c4.04-.04,7.55-2.19,9.53-5.39,1.01-1.63,1.61-3.53,1.68-5.57.11-.66.18-1.33.17-2.02l-5.78-464.94h.01Z" />
          <path class="cls-3" d="m651.6,1017.87l-196.78-2c-7.87.07-14.31-6.25-14.38-14.12l-3.1-470.7,218.28-2.26,10.1,474.7c.07,7.87-6.25,14.31-14.12,14.38h0Z" />
          <path class="cls-1" d="m651.59,1026.87h-.09l-196.7-2h-.12c-12.72,0-23.13-10.29-23.25-23.04l-3.16-479.69,236.15-2.45,10.29,483.71c.12,12.82-10.22,23.35-23.04,23.47h-.09.01Zm-196.77-20h.09l196.67,2c1.38-.03,2.67-.59,3.63-1.57.97-.99,1.51-2.3,1.5-3.69l-9.91-465.74-200.41,2.08,3.04,461.74c.03,2.87,2.41,5.16,5.3,5.18h.09Z" />
          <path class="cls-1" d="m428.11,526.13c-.25-21.49,14.86-39.1,33.76-39.32l168.52.41c18.9-.22,34.42,17.02,34.68,38.51l-236.96.4Z" />
          <path class="cls-1" d="m531.45,986.93h0c-3,.01-5.42-2.26-5.42-5.07l.02-29.93c0-2.81,2.43-5.1,5.43-5.11h0c3-.01,5.42,2.26,5.42,5.07l-.02,29.93c0,2.81-2.43,5.1-5.43,5.11Z" />
          <path class="cls-1" d="m567.68,986.81h0c-3,.01-5.42-2.26-5.42-5.07l.02-29.93c0-2.81,2.43-5.1,5.43-5.11h0c3-.01,5.42,2.26,5.42,5.07l-.02,29.93c0,2.81-2.43,5.1-5.43,5.11Z" />
          <path class="cls-2" d="m568.25,963.9h0c-12.91.04-23.38-9.75-23.37-21.87v-6.21c.01-12.12,10.49-21.98,23.4-22.03h0c12.91-.04,23.38,9.75,23.37,21.87v6.21c-.01,12.12-10.49,21.98-23.4,22.03Z" />
          <path class="cls-3" d="m533.36,958.64c-8.01,0-15.57-2.95-21.26-8.3-5.82-5.47-9.02-12.77-9.02-20.58v-1.34c-19.64-10.87-31.66-30.55-31.64-52.34,0-10.87,9.21-19.76,20.53-19.84l48.26-1.34-10.4-255.02v-.15c.02-20.82,17.86-37.81,39.79-37.89h.15c10.52,0,20.43,3.86,27.89,10.87,7.56,7.1,11.73,16.57,11.76,26.68l9.14,295.54v.11c0,9.57-3.78,18.68-10.63,25.71-8,10.27-20.74,16.42-34.18,16.46l-10.96-.13c-3.5,12.32-15.41,21.5-29.32,21.55h-.11Z" />
          <path class="cls-2" d="m569.77,568.85c18.05,0,32.66,13.71,32.65,30.67l9.14,295.53c0,8.15-3.4,15.57-8.91,21.1-6.45,8.48-17,14.03-28.92,14.07l-16.89-.2c-.24,11.93-10.62,21.57-23.39,21.62h-.09c-12.87,0-23.29-9.77-23.28-21.87v-5.62c-18.77-8.79-31.66-26.98-31.64-48.06h0c0-7.07,6.12-12.82,13.65-12.85l55.43-1.53-10.68-261.96c.01-17,14.7-30.83,32.82-30.89h.12m0-14h-.18c-25.76.09-46.74,20.22-46.76,44.88v.58s10.11,247.79,10.11,247.79l-41.11,1.14c-15.12.16-27.39,12.16-27.4,26.84,0,12.98,3.85,25.58,11.16,36.45,5.35,7.96,12.37,14.74,20.59,19.93.66,8.73,4.55,16.81,11.12,22.98,7,6.57,16.25,10.19,26.05,10.19h.12c9.7-.03,18.88-3.61,25.86-10.08,3.57-3.31,6.38-7.18,8.32-11.41l5.9.07h.22c15.44-.05,30.11-7.08,39.43-18.85,7.96-8.3,12.34-19.03,12.35-30.31v-.44l-9.13-295.33c-.06-12.02-5.01-23.26-13.97-31.67-8.77-8.23-20.37-12.77-32.68-12.77h0Z" />
          <ellipse class="cls-2" cx="563.94" cy="592.64" rx="10.73" ry="10.07" transform="translate(-4.02 3.85) rotate(-.39)" />
          <path class="cls-4" d="m559.96,913.88l-20.98.07c-17.44.06-31.56-13.16-31.55-29.52h0c0-5,4.32-9.06,9.65-9.08l42.91-.15c11.38-.04,20.6,8.59,20.59,19.27h0c0,10.68-9.24,19.37-20.62,19.41h0Z" />
          <path class="cls-1" d="m557.05,985.42h0c0-2.81,2.43-5.1,5.43-5.11l31.89-.11c3-.01,5.42,2.26,5.42,5.07h0c0,2.81-2.43,5.1-5.43,5.11l-31.89.11c-3,.01-5.42-2.26-5.42-5.07Z" />
          <path class="cls-1" d="m518.21,985.55h0c0-2.81,2.43-5.1,5.43-5.11l31.89-.11c3-.01,5.42,2.26,5.42,5.07h0c0,2.81-2.43,5.1-5.43,5.11l-31.89.11c-3,.01-5.42-2.26-5.42-5.07Z" />
          <path class="cls-1" d="m634.74,614.4h0c-.13-7.07-6.35-12.72-13.89-12.61l-37.77.55c-7.54.11-13.54,5.94-13.41,13.01h0c.13,7.07,6.35,12.72,13.89,12.61l37.77-.55c7.54-.11,13.54-5.94,13.41-13.01Z" />
        </g>
      </svg>
    </figure>
  </div>
  <div>

@import url("https://fonts.googleapis.com/css2?family=Anybody:wght@500&display=swap");

:root {
  --small-br: 400px;
  --med-br: 600px;
  --magenta: #ff00cd;
  --orange: #ff2c00;
}

.header-section {
  container: header / inline-size;
  color: white;
  background: #ededed;
  padding: 1rem;
  max-width: 1000px;
  background: linear-gradient(-45deg, var(--magenta), var(--orange));
  border-radius: 0.5rem;
  overflow: hidden; /* for things animating around */
}

.header-layout {
  display: grid;
  grid-template: auto auto auto / 1fr;

  @container (width >= 400px) {
    gap: 1rem;
    grid-template: auto auto / 1.75fr 1fr;
  }

  @container (width >= 600px) {
    grid-template: auto auto / 1.2fr 1fr;
  }
}

.breadcrumbs {
  grid-column: 1 / span 2;
  grid-row: 1;

  @container (width <= 400px) {
    grid-row: 3;
  }

  & a {
    color: inherit;
    text-decoration: none;

    + a:before {
      content: "⇾";
      margin: 0 0.5rem;
    }
  }
}

.header {
  grid-column: 1;
  grid-row: 2;
  font-family: "Anybody", system-ui;
  line-height: 1;
  margin: 0;
  font-size: clamp(2.5rem, 10cqi, 5rem);

  @container (width <= 400px) {
    grid-row: 1;
  }
}

.visual {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  margin: 0;

  @container (400px < width < 600px) {
    margin-right: -10cqi;
    margin-bottom: -5cqi;
  }

  @container (width <= 400px) {
    grid-column: 1;
    grid-row: 2;
    margin-top: 1rem;
    margin-bottom: -35cqi;
  }

  @container (width >= 600px) {
    margin-bottom: -15cqi;
  }

  .wide {
    transition-duration: 0.25s;

    @container (width <= 400px) {
      translate: 0 -30px;
    }
  }

  .tablet {
    transition-duration: 0.25s;

    @container (width <= 400px) {
      translate: 90px 0;
    }
  }

  .tall {
    transition-duration: 0.25s;

    @container (width <= 400px) {
      translate: 490px -350px;
    }

    @container (width >= 600px) {
      translate: 350px -260px;
    }
  }
}

body {
  font-family: system-ui;
}

// Demo inspired by the new Angular site which uses container query headers!