- function makeText() { 
- const lorem = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum veritatis eaque necessitatibus, explicabo vero hic, perspiciatis unde minus error consectetur, quos sunt officiis ad repellendus pariatur eligendi tempora praesentium tenetur';
- const loremArray = lorem.split(' ');
- const amountOfText = Math.floor(Math.random() * (30 - 10) + 10);
- const text = loremArray.slice(0, amountOfText);
- return text.join(' ') + '.';
- }

main.container
  - for (let i = 1; i < 20; i++)
    .card
      img(src=`https://picsum.photos/id/${i + 19 * i}/600/300`)
      section
        h2 Card Title
        p #{makeText()}
View Compiled
:root {
  --font-size-body: clamp(1.31rem, calc(1rem + 0.37vw), 1.5rem);
  --font-size-h2: clamp(1.73rem, calc(1rem + 2.35vw), 2.93rem);
  --font-size-h1: clamp(2.07rem, calc(1rem + 3.1vw), 3.66rem);
}

* {
  box-sizing: border-box;
}

body {
  background-image: linear-gradient(
    45deg,
    hsl(240deg 100% 20%) 0%,
    hsl(289deg 100% 21%) 11%,
    hsl(315deg 100% 27%) 22%,
    hsl(329deg 100% 36%) 33%,
    hsl(337deg 100% 43%) 44%,
    hsl(357deg 91% 59%) 56%,
    hsl(17deg 100% 59%) 67%,
    hsl(34deg 100% 53%) 78%,
    hsl(45deg 100% 50%) 89%,
    hsl(55deg 100% 50%) 100%
  );
  font-family: var(--font-family, system-ui, sans-serif);
  font-size: var(--font-size-body);
  padding-block: 1rem;
}

h2,
.font-size-h2 {
  font-size: var(--font-size-h2);
}

h1,
.font-size-h1 {
  font-size: var(--font-size-h1);
}

.container {
  --max-width: 80ch;
  container-type: inline-size;
  width: min(var(--max-width), 100% - 3rem);
  margin-inline: auto;
}

.card {
  display: grid;
  background: white;
  grid-template-areas: "image content content";
  margin-inline: auto;
  margin-block-start: 1rem;
  border-radius: 0.25rem;
  overflow: hidden;
  img {
    grid-area: image;
    width: 100%;
    height: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
  }
  section {
    grid-area: content;
    display: grid;
    grid-template-columns: 1fr;
    place-content: center;
    padding: 1rem;
    > * {
      margin-block: 0;
    }
    > * + * {
      margin-block-start: 1rem;
    }
    p {
      line-height: 1.5;
    }
  }
  @container (max-width: 60ch) {
    grid-template-areas: "image content";
  }

  @container (max-width: 40ch) {
    grid-template-areas:
      "image"
      "content";
    img {
      aspect-ratio: 16/9;
    }
  }

  @container (max-width: 20ch) {
    grid-template-areas:
      "image"
      "content";
    img {
      aspect-ratio: 1/1;
    }
  }
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.