@import url("https://fonts.googleapis.com/css2family=DM+Sans:ital,opsz@0,9..40;1,9..40&display=swap");

body {
  width: 100dvw;
  min-height: 100dvh;
  display: grid;
  overflow: hidden;

  justify-content: center;
  align-items: center;

  font-family: DM Sans, sans-serif;
  font-weight: 400;
  /* font-size: 1.25rem; */
  font-size: clamp(1rem, 5vw, 1.25rem);
  color: #242442;
}

a {
  color: #0d6cf2;
  text-underline-offset: 0.2rem;
}

a[target="_blank"]::after {
  content: " ⤤";
}

.container {
  max-width: 75rem;
  padding: 1.5rem;
}

img.logo {
  width: 100%;
  max-width: 25rem;
  /* max-height: 5rem; */
}

h1 {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  font-weight: 600;
}

h1 + p {
  opacity: 0.7;
}

.cta {
  margin-top: 2rem;
}

.cards {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  /* position: relative; */
}

.cards::after {
  content: "";
  position: absolute;
  right: 0;
  width: 40rem;
  max-width: 50dvw;
  height: 22rem;
  transform: translateY(-15px);
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 1)
  );
}

.cards img {
  /* width: 238px; */
  height: auto;
}