@import url("https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap");

:root {
  --card-1-stroke: #e67339;
  --card-2-stroke: #a66363;
  --card-3-stroke: #eb3828;
  --card-4-stroke: #a6a09d;
  --card-5-stroke: #99938a;
  --card-6-stroke: #5f7c98;
  --card-base-stroke: #e0e0e0;
  --card-copy: #000;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Google Sans", sans-serif;
}

h1 {
  font-size: clamp(3rem, 5vw, 7rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.05rem;
}

h3 {
  font-size: clamp(2rem, 2.5vw, 3rem);
  font-weight: 450;
  line-height: 1.25;
  letter-spacing: -0.025rem;
}

img,
svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

header,
footer {
  width: 100%;
  padding: 15rem 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.row {
  width: 100%;
  padding: 0 1rem;
  margin-bottom: 1rem;
  display: flex;
  gap: 1rem;
}

.card-container {
  position: relative;
  flex: 1;
  aspect-ratio: 1;
  border-radius: 1rem;
  overflow: hidden;
}

.card-container .svg-stroke {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.5);
  width: 100%;
  height: 100%;
}

#card-1 .svg-stroke-1 svg path {
  stroke: var(--card-1-stroke);
}

#card-2 .svg-stroke-1 svg path {
  stroke: var(--card-2-stroke);
}

#card-3 .svg-stroke-1 svg path {
  stroke: var(--card-3-stroke);
}

#card-4 .svg-stroke-1 svg path {
  stroke: var(--card-4-stroke);
}

#card-5 .svg-stroke-1 svg path {
  stroke: var(--card-5-stroke);
}

#card-6 .svg-stroke-1 svg path {
  stroke: var(--card-6-stroke);
}

.card-container .svg-stroke-2 svg path {
  stroke: var(--card-base-stroke);
}

.card-title {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  color: var(--card-copy);
}

.card-title .word {
  will-change: transform;
}

@media (max-width: 1000px) {
  .row {
    flex-direction: column;
  }
}