<div class="wrapper">
  <aside>
    <h1 class="logo">
      <svg width="36px" height="36px" viewBox="0 0 210 210" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="tanuki-logo">
        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
          <g id="logo" sketch:type="MSLayerGroup" transform="translate(0.000000, 10.000000)">
            <g id="Page-1" sketch:type="MSShapeGroup">
              <g id="Fill-1-+-Group-24">
                <g id="Group-24">
                  <g id="Group">
                    <path d="M105.0614,193.655 L105.0614,193.655 L143.7014,74.734 L66.4214,74.734 L105.0614,193.655 L105.0614,193.655 Z" id="Fill-4" fill="#E24329" class="tanuki-shape"></path>
                    <path d="M105.0614,193.6548 L66.4214,74.7338 L12.2684,74.7338 L105.0614,193.6548 L105.0614,193.6548 Z" id="Fill-8" fill="#FC6D26" class="tanuki-shape"></path>
                    <path d="M12.2685,74.7341 L12.2685,74.7341 L0.5265,110.8731 C-0.5445,114.1691 0.6285,117.7801 3.4325,119.8171 L105.0615,193.6551 L12.2685,74.7341 L12.2685,74.7341 Z" id="Fill-12" fill="#FCA326" class="tanuki-shape"></path>
                    <path d="M12.2685,74.7342 L66.4215,74.7342 L43.1485,3.1092 C41.9515,-0.5768 36.7375,-0.5758 35.5405,3.1092 L12.2685,74.7342 L12.2685,74.7342 Z" id="Fill-16" fill="#E24329" class="tanuki-shape"></path>
                    <path d="M105.0614,193.6548 L143.7014,74.7338 L197.8544,74.7338 L105.0614,193.6548 L105.0614,193.6548 Z" id="Fill-18" fill="#FC6D26" class="tanuki-shape"></path>
                    <path d="M197.8544,74.7341 L197.8544,74.7341 L209.5964,110.8731 C210.6674,114.1691 209.4944,117.7801 206.6904,119.8171 L105.0614,193.6551 L197.8544,74.7341 L197.8544,74.7341 Z" id="Fill-20" fill="#FCA326" class="tanuki-shape"></path>
                    <path d="M197.8544,74.7342 L143.7014,74.7342 L166.9744,3.1092 C168.1714,-0.5768 173.3854,-0.5758 174.5824,3.1092 L197.8544,74.7342 L197.8544,74.7342 Z" id="Fill-22" fill="#E24329" class="tanuki-shape"></path>
                  </g>
                </g>
              </g>
            </g>
          </g>
        </g>
      </svg>
      <span>GitLab</span>
    </h1>
    <nav class="menu">
      <ul>
        <li>
          <a href="#">
            <svg t="1638543010000" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2303" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
              <path d="M947.2 422.4L572.8 115.2c-32-25.6-86.4-25.6-118.4 0L76.8 425.6c-12.8 6.4-16 22.4-9.6 35.2 3.2 12.8 16 19.2 28.8 19.2h32v364.8C128 892.8 163.2 928 211.2 928H416c19.2 0 32-12.8 32-32v-147.2c0-22.4 35.2-44.8 64-44.8 28.8 0 67.2 22.4 67.2 44.8V896c0 19.2 12.8 32 32 32h208c48 0 80-32 80-83.2V480h32c12.8 0 25.6-9.6 28.8-22.4 3.2-12.8 0-25.6-12.8-35.2z" fill="currentColor" p-id="2304"></path>
            </svg>
            <span>Home</span>
          </a>

        </li>
        <li>
          <a href="#" class="active">
            <svg t="1638543287208" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5225" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
              <path d="M733.013333 188.16c0-56.746667 46.08-102.826667 102.826667-102.826667S938.666667 131.413333 938.666667 188.16s-46.08 102.826667-102.826667 102.826667-102.826667-46.08-102.826667-102.826667z m-164.266666 441.6l123.306666-159.146667-1.706666 0.853334c6.826667-9.386667 8.106667-21.333333 3.413333-32a31.445333 31.445333 0 0 0-26.026667-18.773334 32.768 32.768 0 0 0-29.866666 13.226667l-103.253334 133.546667-118.186666-93.013334a33.706667 33.706667 0 0 0-24.32-6.826666 33.066667 33.066667 0 0 0-21.333334 12.8l-126.293333 164.266666-2.56 3.84a31.872 31.872 0 0 0 8.96 40.533334c5.973333 3.84 12.373333 6.4 19.626667 6.4 9.813333 0.426667 19.2-4.693333 25.173333-12.8l107.093333-137.813334 121.6 91.306667 3.84 2.56c13.653333 7.253333 30.72 3.84 40.533334-8.96z m90.453333-468.48c-1.706667 10.666667-2.56 21.333333-2.56 32 0 96 77.653333 173.653333 173.226667 173.653333 10.666667 0 20.906667-1.28 31.573333-2.986666v344.32c0 144.64-85.333333 230.4-230.4 230.4H315.733333C170.666667 938.666667 85.333333 852.906667 85.333333 708.266667V392.533333c0-145.066667 85.333333-231.253333 230.4-231.253333h343.466667z" fill="currentColor" p-id="5226"></path>
            </svg>
            <span>Activity</span>
          </a>

        </li>
        <li>
          <a href="#">
            <svg t="1638543493326" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5685" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
              <path d="M313.107692 551.384615c-27.569231-41.353846-41.353846-88.615385-41.353846-141.784615 0-90.584615 37.415385-165.415385 96.492308-210.707692-19.692308-35.446154-59.076923-61.046154-110.276923-61.046154-86.646154 0-135.876923 70.892308-135.876923 151.630769 0 43.323077 13.784615 80.738462 43.323077 106.338462 15.753846 15.753846 29.538462 35.446154 29.538461 55.138461s-7.876923 39.384615-57.107692 61.046154c-70.892308 31.507692-135.876923 74.830769-137.846154 139.815385 1.969231 43.323077 29.538462 76.8 70.892308 76.8h64.984615c9.846154 0 19.692308-5.907692 25.6-15.753847 31.507692-57.107692 90.584615-92.553846 139.815385-118.153846 17.723077-7.876923 21.661538-29.538462 11.815384-43.323077z m575.015385-39.384615c-49.230769-21.661538-57.107692-39.384615-57.107692-61.046154s13.784615-41.353846 29.538461-55.138461c29.538462-27.569231 43.323077-63.015385 43.323077-106.338462 0-80.738462-47.261538-151.630769-135.876923-151.630769-51.2 0-90.584615 25.6-112.246154 61.046154 59.076923 45.292308 96.492308 120.123077 96.492308 210.707692 0 53.169231-13.784615 100.430769-41.353846 141.784615-9.846154 15.753846-3.938462 35.446154 11.815384 43.323077 49.230769 23.630769 108.307692 61.046154 139.815385 118.153846 5.907692 9.846154 15.753846 15.753846 25.6 15.753847h64.984615c41.353846 0 68.923077-33.476923 68.923077-76.8 1.969231-64.984615-63.015385-108.307692-133.907692-139.815385z m-244.184615 143.753846c-53.169231-23.630769-63.015385-45.292308-63.015385-66.953846 0-23.630769 15.753846-45.292308 33.476923-61.046154 31.507692-29.538462 49.230769-70.892308 49.230769-118.153846 0-88.615385-53.169231-165.415385-149.661538-165.415385s-149.661538 76.8-149.661539 165.415385c0 47.261538 17.723077 88.615385 49.23077 118.153846 17.723077 17.723077 33.476923 39.384615 33.476923 61.046154 0 23.630769-7.876923 43.323077-63.015385 66.953846-78.769231 33.476923-153.6 70.892308-155.569231 141.784616 0 47.261538 35.446154 86.646154 80.738462 86.646153h409.6c45.292308 0 80.738462-39.384615 80.738461-86.646153-1.969231-68.923077-76.8-106.338462-155.56923-141.784616z" p-id="5686" fill="currentColor"></path>
            </svg>
            <span>Groups</span>
          </a>

        </li>
        <li>
          <a href="#">
            <svg t="1638543662241" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10610" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">

              <path d="M992.576 336.704c-51.712-141.504-163.712-253.568-305.344-305.28C720.512 11.968 758.656 0 800 0 923.776 0 1024 100.288 1024 224 1024 265.344 1011.968 303.488 992.576 336.704zM960 512c0 121.856-49.024 232.128-128 312.896L832 832l0 128c0 35.392-28.608 64-64 64s-64-28.608-64-64l0-44.736C645.632 943.104 580.992 960 512 960c-69.056 0-133.632-16.896-192-44.736L320 960c0 35.392-28.672 64-64 64s-64-28.608-64-64l0-128 0-7.104C113.024 744.128 64 633.856 64 512c0-247.424 200.576-448 448-448S960 264.576 960 512zM512 192C335.296 192 192 335.232 192 512s143.296 320 320 320c176.768 0 320-143.232 320-320S688.768 192 512 192zM640 576 512 576C476.672 576 448 547.392 448 512L448 384c0-35.392 28.672-64 64-64 35.392 0 64 28.608 64 64l0 64 64 0c35.392 0 64 28.608 64 64S675.392 576 640 576zM31.424 336.704C11.968 303.488 0 265.344 0 224 0 100.288 100.288 0 224 0c41.344 0 79.488 11.968 112.704 31.424C195.136 83.136 83.136 195.2 31.424 336.704z" fill="currentColor" p-id="10611"></path>
            </svg>
            <span>Milestones</span>
          </a>

        </li>
        <li>
          <a href="#">
            <svg t="1638543841347" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11116" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
              <path d="M807.152941 222.870588c-78.305882-78.305882-180.705882-120.470588-295.152941-120.470588s-216.847059 42.164706-295.152941 120.470588C132.517647 301.176471 90.352941 409.6 90.352941 524.047059s42.164706 216.847059 126.494118 295.152941c78.305882 78.305882 186.729412 126.494118 295.152941 126.494118s216.847059-42.164706 295.152941-126.494118c78.305882-78.305882 126.494118-186.729412 126.494118-295.152941s-42.164706-222.870588-126.494118-301.176471zM469.835294 349.364706c0-12.047059 6.023529-18.070588 12.047059-30.117647 12.047059-6.023529 18.070588-6.023529 30.117647-6.02353s18.070588 6.023529 30.117647 12.047059c6.023529 6.023529 12.047059 18.070588 12.047059 30.117647V542.117647c0 12.047059-6.023529 18.070588-12.047059 30.117647-12.047059 0-18.070588 6.023529-30.117647 6.02353s-18.070588-6.023529-30.117647-12.047059c-6.023529-12.047059-12.047059-18.070588-12.047059-30.117647V349.364706z m78.305882 367.435294c-12.047059 12.047059-24.094118 18.070588-36.141176 18.070588s-30.117647-6.023529-36.141176-18.070588-18.070588-24.094118-18.070589-36.141176c0-12.047059 6.023529-30.117647 18.070589-36.141177 12.047059-12.047059 24.094118-18.070588 36.141176-18.070588s30.117647 6.023529 36.141176 18.070588c12.047059 12.047059 18.070588 24.094118 18.070589 36.141177 0 12.047059-6.023529 30.117647-18.070589 36.141176z" fill="currentColor" p-id="11117"></path>
            </svg>
            <span>Issues</span>
          </a>

        </li>
        <li>
          <a href="#">
            <svg t="1638544030830" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13197" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
              <path d="M303.146667 375.04A128.042667 128.042667 0 0 0 426.666667 469.333333h170.666666a213.376 213.376 0 0 1 210.218667 176.896A128.042667 128.042667 0 0 1 768 896a128 128 0 0 1-47.146667-247.04A128.042667 128.042667 0 0 0 597.333333 554.666667h-170.666666a212.394667 212.394667 0 0 1-128-42.666667v135.253333a128.042667 128.042667 0 1 1-85.333334 0V376.746667a128.042667 128.042667 0 1 1 89.813334-1.706667z" p-id="13198" fill="currentColor"></path>
            </svg>
            <span>Merge Requests</span>
          </a>

        </li>
        <li>
          <a href="#">
            <svg t="1638544174435" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13646" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
              <path d="M877.714286 54.857143H754.285714V9.142857c0-5.028571-4.114286-9.142857-9.142857-9.142857h-64c-5.028571 0-9.142857 4.114286-9.142857 9.142857v45.714286H498.285714V9.142857c0-5.028571-4.114286-9.142857-9.142857-9.142857h-64c-5.028571 0-9.142857 4.114286-9.142857 9.142857v45.714286H292.571429c-20.228571 0-36.571429 16.342857-36.571429 36.571428v137.142858h-109.714286c-20.228571 0-36.571429 16.342857-36.571428 36.571428v722.285714c0 20.228571 16.342857 36.571429 36.571428 36.571429h585.142857c20.228571 0 36.571429-16.342857 36.571429-36.571429v-109.714285h109.714286c20.228571 0 36.571429-16.342857 36.571428-36.571429V91.428571c0-20.228571-16.342857-36.571429-36.571428-36.571428zM685.714286 482.285714H514.285714V310.857143h0.228572L685.714286 482.057143v0.228571z m146.285714 313.142857h-64V448L548.571429 228.571429H338.285714v-91.428572h77.714286v36.571429c0 5.028571 4.114286 9.142857 9.142857 9.142857h64c5.028571 0 9.142857-4.114286 9.142857-9.142857v-36.571429h173.714286v36.571429c0 5.028571 4.114286 9.142857 9.142857 9.142857h64c5.028571 0 9.142857-4.114286 9.142857-9.142857v-36.571429h77.714286v658.285714z" p-id="13647" fill="currentColor"></path>
            </svg>
            <span>Snippets</span>
          </a>

        </li>
        <li>
          <a href="#">
            <svg t="1638544664416" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14446" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
              <path d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024z m-32.128-192.384c41.152 0 74.56-30.528 74.56-68.16s-33.408-68.16-74.56-68.16-74.56 30.528-74.56 68.16 33.344 68.16 74.56 68.16z m0-639.232c-123.52 0-223.68 91.584-223.68 204.48H368c0-56.448 50.048-102.272 111.808-102.272 61.76 0 111.808 45.76 111.808 102.272 0 38.848-23.744 72.64-58.624 89.984a224.256 224.256 0 0 0-43.136 30.784l-1.152 1.024a169.152 169.152 0 0 0-6.016 5.76l-1.216 1.216-1.6 1.6v0.128a201.664 201.664 0 0 0-44.352 70.016 190.08 190.08 0 0 0-10.56 52.992h-1.024l-0.128 12.288c0-4.16 0.832-8.128 1.088-12.288h110.848l-0.064 12.288c0-38.848 23.68-72.64 58.56-89.92 19.968-10.88 37.952-24.576 53.248-40.448v-0.064a194.048 194.048 0 0 0 56-135.296c0.064-112.96-100.096-204.544-223.616-204.544z" fill="currentColor" p-id="14447"></path>
            </svg>
            <span>Help</span>
          </a>

        </li>
        <li class="diver"></li>
        <li>
          <a href="#">
            <svg t="1638544804331" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17679" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
              <path d="M896 893.12c-12.48-59.52-89.28-122.88-161.92-133.12h-14.72a306.88 306.88 0 0 1-209.6 89.92 309.76 309.76 0 0 1-210.24-89.92h-14.08c-74.24 9.6-151.04 72-163.52 132.48v5.76a59.52 59.52 0 0 0 47.68 69.44 2012.8 2012.8 0 0 0 322.88 24.32 1948.8 1948.8 0 0 0 355.2-30.08A59.2 59.2 0 0 0 896 893.12zM258.88 545.92a70.08 70.08 0 0 0 10.56 0c48.64 123.84 142.08 207.04 239.04 207.36s188.16-84.8 237.12-209.28a70.4 70.4 0 0 0 12.48 0 90.56 90.56 0 0 0 82.56-96 96 96 0 0 0-58.56-92.16C784.32 140.16 667.84 32 508.48 32S232.32 140.16 234.56 357.44A96 96 0 0 0 176 448a90.56 90.56 0 0 0 82.88 97.92z" fill="currentColor" p-id="17680"></path>
            </svg>
            <span>Profile Settings</span>
          </a>

        </li>
      </ul>
    </nav>
    <div class="profile">
      <img src="https://www.w3cplus.com/sites/all/themes/w3cplusV2/images/logo.png" alt="">
      <span>w3cplus</span>
    </div>
  </aside>
  <main>
    <div class="card">
      <img src="https://picsum.photos/2568/600?random=1" width="2568" height="600" alt="" class="card__thumbnail" />
      <div class="card__badge">Must Try</div>
      <h3 class="card__title">Best Brownies in Town</h3>
      <p class="card__describe">High quality ingredients and best in-class chef. Light, tender, and easy to make~</p>
      <button class="card__button">Order now</button>
    </div>
    <div class="card">
      <img src="https://picsum.photos/2568/600?random=2" width="2568" height="600" alt="" class="card__thumbnail" />
      <div class="card__badge">Must Try</div>
      <h3 class="card__title">Best Brownies in Town</h3>
      <p class="card__describe">High quality ingredients and best in-class chef. Light, tender, and easy to make~</p>
      <button class="card__button">Order now</button>
    </div>
    <div class="card">
      <img src="https://picsum.photos/2568/600?random=3" width="2568" height="600" alt="" class="card__thumbnail" />
      <div class="card__badge">Must Try</div>
      <h3 class="card__title">Best Brownies in Town</h3>
      <p class="card__describe">High quality ingredients and best in-class chef. Light, tender, and easy to make~</p>
      <button class="card__button">Order now</button>
    </div>
    <div class="card">
      <img src="https://picsum.photos/2568/600?random=4" width="2568" height="600" alt="" class="card__thumbnail" />
      <div class="card__badge">Must Try</div>
      <h3 class="card__title">Best Brownies in Town</h3>
      <p class="card__describe">High quality ingredients and best in-class chef. Light, tender, and easy to make~</p>
      <button class="card__button">Order now</button>
    </div>
  </main>
</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;

  display: grid;
  align-items: start;
  justify-content: center;
}

ul {
  list-style: none outside none;
}

.wrapper {
  display: grid;
  grid-template-columns: 0.3fr 1fr;
  width: 100vw;
}
aside {
  display: grid;
  grid-template-rows: min-content auto min-content;
  background-color: #777;
  padding-bottom: 20px;
}

.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 1.25rem;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 20px 0;
  border-bottom: 1px solid #352a2a;
  box-shadow: 0 1px 0 0 #d8d8d8;
}

.diver {
  border-bottom: 1px solid #352a2a;
  box-shadow: 0 1px 0 0 #d8d8d8;
  width: 100%;
  height: 0;
}

.menu a {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #d8d8d8;
  padding: 0 24px;
  min-height: 44px;
  text-decoration: none;
}

.menu .active,
.menu a:hover {
  background-color: #666;
  color: #fff;
}

.profile {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: #fff;
}

.profile img {
  width: 48px;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}

svg {
  width: 1.5em;
  height: 1.5em;
}

main {
  display: grid;
  gap: 20px;
  padding: 20px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: start;
  align-content: start;
}

.card {
  display: grid;
  border-radius: 24px;
  background-color: #fff;
  color: #454545;
  gap: 10px;
  box-shadow: 0 0 0.35em 0 rgb(0 0 0 / 0.5);
}

.card__thumbnail {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  border-radius: 24px 24px 0 0;
  grid-area: 1 / 1 / 2 / 2;
  z-index: 1;
}

.card__badge {
  grid-area: 1 / 1 / 2 / 2;
  z-index: 2;
  background-color: #2196f3;
  border-radius: 0 10rem 10rem 0;
  align-self: start;
  justify-self: start;
  margin-top: 2rem;
  color: #fff;
  padding: 5px 12px 5px 8px;
  text-shadow: 0 0 1px rgb(0 0 0 / 0.5);
  filter: drop-shadow(0px 0px 2px rgb(0 0 0 / 0.5));
}

.card__title {
  font-weight: 700;
  font-size: clamp(1.2rem, 1.2rem + 3vw, 1.5rem);
  padding: 0 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.card__describe {
  color: #666;
  line-height: 1.4;
  padding: 0 20px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.card__button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 10rem;
  background-color: #feca53;
  padding: 10px 20px;
  color: #000;
  text-decoration: none;
  box-shadow: 0 3px 8px rgb(0 0 0 / 7%);
  transition: all 0.2s linear;
  font-weight: 700;
  justify-self: end;
  margin: 0 20px 20px 0;
  cursor: pointer;
}

.card__button:hover {
  background-color: #ff9800;
}

aside {
  container-type: inline-size;
  min-width: 100px;
}

.wrapper {
  container-type: inline-size;
}

@container (width < 200px) {
  .logo span,
  .menu span,
  .profile span {
    display: none;
  }

  .menu a {
    gap: 0;
    justify-content: center;
  }
}

@container (width > 760px) and (width < 1024px) {
  main {
    grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
  }
  .card {
    grid-template-columns: 240px auto;
    grid-template-rows: min-content min-content auto;
    grid-template-areas:
      "thumbnail title"
      "thumbnail describe"
      "thumbnail button";
    gap: 0;
  }

  .card__thumbnail {
    grid-area: thumbnail;
    aspect-ratio: 1 / 1;
    border-radius: 12px 0 0 12px;
    z-index: 1;
  }

  .card__badge {
    grid-area: thumbnail;
    z-index: 2;
    display: flex;
  }
  .card__describe {
    grid-area: describe;
    align-self: start;
    display: flex;
    margin-top: -24px;
  }

  .card__title {
    grid-area: title;
    margin-top: 20px;
    align-self: start;
  }

  .card__button {
    grid-area: button;
    align-self: end;
  }
}