<div class="grid__container">
  <div class="grid__item header">
    <p>W3cplus</p>
    <h1>Crossed Sections with CSS Grid</h1>
  </div>
  <div class="grid__item trophies">
    <ul>
      <li>
        <a href="#">
          <svg t="1635343068820" class="icon" viewBox="0 0 1244 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1179" width="200" height="200">
            <path fill="currentColor" d="M1243.574857 656.603429c0-177.883429-176.054857-322.852571-373.869714-322.852571-209.444571 0-374.345143 144.969143-374.345143 322.852571 0 178.176 164.937143 322.852571 374.345143 322.852571 43.812571 0 88.027429-11.190857 132.059429-22.345143l120.722286 66.852571-33.097143-111.177143C1177.709714 845.787429 1243.574857 756.918857 1243.574857 656.603429zM748.324571 600.941714c-21.906286 0-44.032-22.016-44.032-44.507429 0-22.198857 22.125714-44.544 44.032-44.544 33.316571 0 55.113143 22.308571 55.113143 44.544C803.437714 578.925714 781.641143 600.941714 748.324571 600.941714zM990.427429 600.941714c-21.796571 0-43.702857-22.016-43.702857-44.507429 0-22.198857 21.942857-44.544 43.702857-44.544 32.987429 0 55.076571 22.308571 55.076571 44.544C1045.504 578.925714 1023.414857 600.941714 990.427429 600.941714zM841.874286 309.869714c14.299429 0 28.342857 1.024 42.349714 2.596571-38.070857-179.236571-227.657143-312.429714-444.086857-312.429714-241.956571 0-440.137143 166.692571-440.137143 378.368 0 122.221714 65.938286 222.537143 176.128 300.361143L132.096 812.580571l153.856-77.970286c55.076571 11.008 99.254857 22.308571 154.185143 22.308571 13.824 0 27.501714-0.694857 41.069714-1.755429-8.557714-29.732571-13.568-60.891429-13.568-93.257143C467.638857 467.565714 632.795429 309.869714 841.874286 309.869714zM605.184 189.220571c33.133714 0 55.113143 22.052571 55.113143 55.515429 0 33.389714-21.979429 55.661714-55.113143 55.661714-32.950857 0-66.084571-22.272-66.084571-55.661714C539.099429 211.236571 572.233143 189.220571 605.184 189.220571zM297.142857 300.397714c-32.950857 0-66.267429-22.272-66.267429-55.661714 0-33.462857 33.28-55.515429 66.267429-55.515429 32.987429 0 54.966857 22.052571 54.966857 55.515429C352.109714 278.089143 330.130286 300.397714 297.142857 300.397714z" p-id="1180"></path>
          </svg>
        </a>
      </li>
      <li>
        <a href="#">
          <svg t="1635343097095" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1982" width="200" height="200">
            <path fill="currentColor" d="M728.864 497.056c-12.48-3.712-29.152-6.752-22.624-22.944 14.144-35.136 15.744-73.792 0.416-95.424-28.736-40.576-99.36-29.472-189.44 7.808 0-0.064-28.288 12.224-21.056-9.952 13.856-44.032 11.776-80.896-9.792-102.208-48.896-48.352-178.88 1.824-290.368 111.936C112.48 468.8 64 556.256 64 631.84c0 144.608 187.68 232.544 371.296 232.544 240.704 0 395.776-139.104 395.776-248.832C831.072 549.28 779.616 512.608 728.864 497.056zM435.808 812.576c-146.528 14.272-272.992-51.168-282.496-146.208-9.504-95.04 101.568-183.68 248.096-197.984 146.528-14.304 273.024 51.136 282.496 146.144C693.376 709.6 582.336 798.24 435.808 812.576z" p-id="1983"></path>
            <path fill="currentColor" d="M897.632 235.136c-60.096-62.496-148.704-86.304-230.496-69.984l-0.032 0c-18.944 3.808-30.976 21.28-26.944 38.976 4.032 17.728 22.656 29.056 41.568 25.28 58.176-11.584 121.152 5.376 163.872 49.76 42.656 44.384 54.272 104.928 35.968 157.984l0 0c-5.952 17.28 4.128 35.776 22.592 41.376 18.368 5.568 38.144-3.872 44.096-21.12 0-0.032 0-0.096 0-0.096C973.92 382.656 957.728 297.568 897.632 235.136" p-id="1984"></path>
            <path fill="currentColor" d="M807.904 317.088c-29.024-31.2-71.872-43.04-111.456-34.88-16.16 3.328-26.464 18.752-23.008 34.432 3.456 15.616 19.36 25.632 35.488 22.24l0 0.032c19.328-3.968 40.32 1.824 54.496 17.024 14.208 15.264 18.016 36.032 11.936 54.272l0.032 0c-5.056 15.232 3.52 31.584 19.264 36.512 15.744 4.864 32.608-3.424 37.696-18.688C844.768 390.752 836.992 348.288 807.904 317.088" p-id="1985"></path>
            <path fill="currentColor" d="M484.928 504.064C413.12 485.76 331.968 520.8 300.8 582.72c-31.744 63.168-1.056 133.28 71.488 156.192 75.136 23.712 163.68-12.64 194.464-80.8C597.12 591.488 559.2 522.848 484.928 504.064zM430.08 662.528c-14.592 22.336-45.824 32.128-69.376 21.824-23.2-10.144-30.048-36.096-15.456-57.856 14.432-21.696 44.608-31.36 67.968-21.952C436.864 614.208 444.416 639.968 430.08 662.528zM478.176 603.328c-5.28 8.64-16.928 12.832-26.08 9.216-8.992-3.552-11.808-13.248-6.688-21.728 5.248-8.448 16.48-12.608 25.44-9.184C479.936 584.8 483.2 594.592 478.176 603.328z" p-id="1986"></path>
          </svg>
        </a>
      </li>
      <li>
        <a href="">
          <svg t="1635343152745" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4875" width="200" height="200">
            <path fill="currentColor" d="M512 1024C229.2224 1024 0 794.7776 0 512 0 229.2224 229.2224 0 512 0c282.7776 0 512 229.2224 512 512 0 282.7776-229.2224 512-512 512z m-129.877333-756.48s-36.1984 2.116267-48.981334 24.490667c-12.782933 22.357333-54.306133 137.3696-54.306133 137.3696s13.841067 6.382933 37.2736-10.6496c23.432533-17.0496 30.890667-46.865067 30.890667-46.865067l42.581333-2.116267 1.0752 121.3952s-73.489067-1.0752-88.405333 0c-14.8992 1.058133-23.415467 40.448-23.415467 40.448h111.8208s-9.591467 67.106133-38.3488 116.087467c-28.740267 48.981333-83.063467 87.313067-83.063467 87.313067s39.424 15.9744 77.738667-6.382934c38.3488-22.357333 66.6112-120.712533 66.6112-120.712533l89.941333 110.062933s8.192-52.394667-1.467733-67.1744c-9.659733-14.7968-62.208-74.2912-62.208-74.2912l-22.954667 20.224 16.3328-65.109333h97.962667s0-38.3488-19.1488-40.465067c-19.182933-2.133333-78.813867 0-78.813867 0v-119.278933h88.405334s-1.0752-39.389867-18.1248-39.389867H359.765333l22.357334-64.955733z m170.001066 61.184v358.570667h36.010667l13.090133 45.0048 63.351467-45.0048h89.053867V328.704H552.123733z m42.666667 39.918933h117.879467v277.9136h-41.864534l-53.384533 40.2432-11.639467-40.2432h-10.990933V368.64z" fill="#0E87EA" p-id="4876"></path>
          </svg>
        </a>
      </li>
      <li>
        <a href="">
          <svg t="1635343176251" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5667" width="200" height="200">
            <path fill="currentColor" d="M928 254.3c-30.6 13.2-63.9 22.7-98.2 26.4 35.4-21.1 62.3-54.4 75-94-32.7 19.5-69.7 33.8-108.2 41.2C765.4 194.6 721.1 174 672 174c-94.5 0-170.5 76.6-170.5 170.6 0 13.2 1.6 26.4 4.2 39.1-141.5-7.4-267.7-75-351.6-178.5-14.8 25.4-23.2 54.4-23.2 86.1 0 59.2 30.1 111.4 76 142.1-28-1.1-54.4-9-77.1-21.7v2.1c0 82.9 58.6 151.6 136.7 167.4-14.3 3.7-29.6 5.8-44.9 5.8-11.1 0-21.6-1.1-32.2-2.6C211 652 273.9 701.1 348.8 702.7c-58.6 45.9-132 72.9-211.7 72.9-14.3 0-27.5-0.5-41.2-2.1C171.5 822 261.2 850 357.8 850 671.4 850 843 590.2 843 364.7c0-7.4 0-14.8-0.5-22.2 33.2-24.3 62.3-54.4 85.5-88.2z" p-id="5668"></path>
          </svg>
        </a>
      </li>
      <li>
        <a href="">
          <svg t="1635343210594" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6453" width="200" height="200">
            <path fill="currentColor" d="M512.032 831.904c-19.168 0-38.304-9.92-58.144-29.76-7.808-7.808-7.808-20.48 0-28.288s20.48-7.808 28.288 0C494.368 786.08 504.16 792 512.032 792s17.664-5.92 29.856-18.144c7.808-7.808 20.48-7.808 28.288 0s7.808 20.48 0 28.288c-19.84 19.84-38.976 29.76-58.144 29.76z m-512-306.4c0 49.888 4.256 95.136 12.8 135.68s20.544 75.744 36 105.536 35.008 55.904 58.656 78.336 49.344 40.928 77.056 55.456c27.744 14.528 59.456 26.304 95.2 35.264S351.84 951.04 388.8 954.624 466.496 960 510.944 960c44.448 0 85.248-1.792 122.4-5.376s73.6-9.856 109.344-18.848c35.744-8.96 67.552-20.736 95.456-35.264s53.792-33.024 77.6-55.456c23.808-22.432 43.456-48.544 58.944-78.336s27.552-64.96 36.256-105.536c8.704-40.576 13.056-85.792 13.056-135.68 0-89.376-27.744-166.368-83.2-230.976 3.2-8.608 5.952-18.496 8.256-29.6s4.544-26.816 6.656-47.104c2.144-20.288 1.344-43.712-2.4-70.272S942.56 93.888 932.256 66.24l-8-1.632c-5.344-1.088-14.048-0.704-26.144 1.088s-26.208 5.024-42.4 9.696-37.056 13.92-62.656 27.744-52.608 31.328-81.056 52.512c-48.352-14.72-115.008-30.112-200-30.112s-151.808 15.392-200.544 30.112c-28.448-21.184-55.552-38.592-81.344-52.224s-46.4-22.976-61.856-28c-15.456-5.024-29.792-8.256-42.944-9.696s-21.6-1.888-25.344-1.344c-3.744 0.544-6.496 1.152-8.256 1.888-10.304 27.648-17.408 54.752-21.344 81.312s-4.8 49.888-2.656 69.984c2.144 20.096 4.448 35.904 6.944 47.392S80 286.304 83.2 294.56C27.744 358.816 0 435.808 0 525.536z m136.544 113.888c0-58.016 21.344-110.624 64-157.856 12.8-14.4 27.648-25.312 44.544-32.704s36.096-11.616 57.6-12.608 42.048-0.8 61.6 0.608 43.744 3.296 72.544 5.696 53.696 3.616 74.656 3.616c20.96 0 45.856-1.184 74.656-3.616s52.992-4.288 72.544-5.696c19.552-1.408 40.096-1.6 61.6-0.608s40.8 5.216 57.856 12.608c17.056 7.392 32 18.304 44.8 32.704 42.656 47.232 64 99.84 64 157.856 0 34.016-3.552 64.32-10.656 90.944s-16.096 48.928-26.944 66.912c-10.848 18.016-26.048 33.216-45.6 45.632s-38.496 22.016-56.8 28.8c-18.304 6.784-41.952 12.096-70.944 15.904s-54.944 6.112-77.856 6.912c-22.944 0.8-51.808 1.216-86.656 1.216s-63.648-0.416-86.4-1.216c-22.752-0.8-48.608-3.104-77.6-6.912s-52.608-9.12-70.944-15.904c-18.304-6.816-37.248-16.416-56.8-28.8s-34.752-27.616-45.6-45.632c-10.848-18.016-19.84-40.32-26.944-66.912s-10.656-56.928-10.656-90.944zM256.032 608c0-53.024 28.64-96 64-96s64 42.976 64 96-28.64 96-64 96-64-42.976-64-96z m384 0c0-53.024 28.64-96 64-96s64 42.976 64 96-28.64 96-64 96-64-42.976-64-96z" p-id="6454"></path>
          </svg>
        </a>
      </li>
    </ul>
  </div>
  <div class="grid__item info">
    <div class="card">
      <div class="card__details">
        jelly-o brownie sweet
      </div>
    </div>
    <div class="card">

      <div class="card__details">
        Muffin jelly gingerbread
      </div>
    </div>
    <div class="card">

      <div class="card__details">
        sesame snaps chocolate
      </div>
    </div>
  </div>
  <div class="grid__item photo">
    <img src="https://picsum.photos/600/400?random=1" width="600" height="400" alt="" />
  </div>
  <div class="grid__item bio">
    <p>Kiara enjoys long naps on the beach (or any other place, really, she's not very demanding on that matter). Likes to to sunbath a lot. She's friendly with other dogs and very patient. She's a furry, chubby princess.</p>
  </div>
</div>

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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #557;
  color: #fff;
  padding: 20px;

  display: grid;
  place-content: center;
}

img {
  display: block;
  max-width: 100%;
}

.grid__container {
  display: grid;
  grid-template-rows: repeat(3, minmax(100px, max-content));
  grid-template-columns: 200px 1fr 1fr 200px;
  gap: 20px;
  min-inline-size: 60vw;
  max-inline-size: 80vw;
  grid-template-areas:
    "header   header  header info"
    "trophies photo   photo  info"
    "trophies bio     bio    bio";
}

.header {
  grid-area: header;
}

.trophies {
  grid-area: trophies;
}

.info {
  grid-area: info;
}

.photo {
  grid-area: photo;
}

.bio {
  grid-area: bio;
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
  background: #0c9a9a;
  color: #fff;
  grid-column-start: auto;
  grid-row-start: auto;
  color: #fff;
  background: url(https://picsum.photos/400/?random=11);
  background-size: cover;
  background-position: center;
  box-shadow: -2px 2px 10px 0px rgb(68 68 68 / 40%);
  transition: transform 0.3s ease-in-out;
  cursor: pointer;
  counter-increment: item-counter;
  width: 100%;
  border-radius: 10px;
  position: relative;
}

.card:nth-of-type(2n) {
  background-image: url(https://picsum.photos/400?random=31);
}

.card:nth-of-type(2n + 1):not(:first-child) {
  background-image: url(https://picsum.photos/400?random=12);
}

.card:hover {
  transform: scale(1.05);
}

.card::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.3;
  transition: opacity 0.3s ease-in-out;
  border-radius: 10px;
}
.card:hover::after {
  opacity: 0;
}
.card__details {
  position: relative;
  z-index: 1;
  padding: 15px;
  color: #444;
  background: #fff;
  text-transform: lowercase;
  letter-spacing: 1px;
  color: #828282;
  border-radius: 0 0 10px 10px;
}

.card__details::before {
  content: counter(item-counter);
  font-weight: bold;
  font-size: 1.1rem;
  padding-right: 0.5em;
  color: #444;
}

.header p {
  font-size: 1rem;
}

.header h1 {
  font-size: 2.25rem;
  margin: 0;
  color: #00bcd4;
  text-shadow: 1px 1px 0px rgb(255 255 255 / 50%);
}

.header {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.trophies {
  padding: 1rem;
  border: 2px solid rgb(255 255 255 / 0.4);
  border-radius: 0.25rem;
  color: #fff;
}

.trophies ul {
  list-style: none outside none;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 100%;
}

.trophies a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffeb3b;
  transition: all 0.2s ease-in-out;
}

.trophies a:hover {
  mix-blend-mode: color-dodge;
}

.trophies svg {
  width: 50%;
  height: auto;
}

.info {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  gap: 10px;
}

.photo {
  background: linear-gradient(45deg, #e82929, #ffc107);
  border-radius: 10px;
  overflow: hidden;
}

.photo img {
  border-radius: 10px;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: multiply;
}

.bio {
  background-color: #5e2ca5;
  border-radius: 0.25rem;
  padding: 1.25em;
}

.bio p {
  color: #fff;
  font-size: 1rem;
  line-height: 1.5;
}