Bento Grid Solution

What are you most proud of, and what would you do differently next time?

I am most proud of being able to utilise CSS grids, SASS and BEM in this project.

What challenges did you encounter, and how did you overcome them?

One challenge was positioning an image inside a card without affecting the height of the car. This issue was solved by changing the 'position' property of the card (parent) and the child (image).

.consistent-posting-card {
  /* Allows image to be clipped */
  overflow: clip;
  /*  Establish a positioning context for child elements. This makes the card
    the "anchor" for the absolutely positioned image inside it. */
  position: relative;

  &__image {
    /*  Take the image out of the normal document flow. This allows us to
        position it anywhere relative to its parent (the card). */
    position: absolute;
    /*  Move the image's bottom edge to be positioned below the card's bottom edge. */
    bottom: -2.2rem;
    width: 80%;
  }
}

Another issue was that the 'illustration-multiple-platforms.webp' image had purple artefacts in the transparency. I used a filter to create drop-shadows that helped to mask this.

 .multiple-accounts-img {
    /* Filter to add a very subtle shadow to help mask * /
    /* the faint purple edge artifacts on the image asset. */
      filter: drop-shadow(0 2px 8px hsl(0 0% 0% / 0.15));
      margin-bottom: $space-xs;
      max-width: 100%;
    }

What specific areas of your project would you like help with?

Any feedback is appreciated. It would be helpful to know how I can improve the code, especially with how I used CSS grids.