<main>
  <a href="#" class="card" aria-label="First title">
    <div class="title">First title</div>
    <p>Quis nostrud nisi ut aliquip ea commodo consequat.</p>
  </a>

  <a href="#" class="card" aria-label="Second title">
    <div class="title">Second title</div>
    <p>Duis aute irure dolor in cillum dolore eu.</p>
  </a>

  <a href="#" class="card" aria-label="Third title">
    <div class="title">Third title</div>
    <p>Excepteur sint occaecat cupidatat non proident.</p>
  </a>
</main>

@import "https://unpkg.com/open-props";
@import "https://unpkg.com/open-props/normalize.min.css";

@use postcss-preset-env;

:root {
  --shadow-color: 0deg 0% 54%;
  --shadow-elevation-medium:
    0px 0.8px 0.9px hsl(var(--shadow-color) / 0.36),
    0px 2.7px 3px -0.8px hsl(var(--shadow-color) / 0.36),
    0px 6.7px 7.5px -1.7px hsl(var(--shadow-color) / 0.36),
    0.1px 16.2px 18.2px -2.5px hsl(var(--shadow-color) / 0.36);
}

main {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: space-around;
  max-inline-size: calc(var(--size-content-1) * 4);
  gap: var(--size-5);
  padding: var(--size-5);
}

.card {
  flex-basis: var(--size-content-1);
  display: flex;
  flex-direction: column;
  gap: var(--size-2);
  padding: var(--size-4);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-elevation-medium);
  background-color: white;
  color: var(--gray-9);
  
  &:hover {
    text-decoration: none;
  }
}

.title {
  line-height: var(--font-lineheight-1);
  font-size: var(--font-size-3);
  font-weight: var(--font-weight-5);
  color: var(--indigo-6);
}

.card:hover .title {
  text-decoration: underline;
}

body {
  display: grid;
  place-content: center;
  background: #e9ecef;
}