body {
  box-sizing: border-box;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background-image: linear-gradient(
    -135deg,
    purple,
    rgb(0, 136, 255),
    lightcoral
  );
}

main {
  margin: 0;
  padding: 0;
}

.title {
  font-family: "Sixtyfour Convergence", sans-serif;
  /* font-optical-sizing: auto; */
  font-weight: 100;
  font-style: normal;
  font-variation-settings: "BLED" 0, "SCAN" 0, "XELA" 0, "YELA" 0;
}

.projects {
  display: grid;
  grid-template-areas:
    "h h h h "
    ". c1 c2 ."
    ". . . . ";
  grid-template-rows: 15dvh 65dvh 10dvh;
  grid-template-columns: 0.35fr repeat(2, 1.5fr) 0.35fr;
  -moz-column-gap: 2.5%;
  column-gap: 3%;
  row-gap: 7.5%;
  height: 100dvh;
  width: 100%;
}

.projects :is(img) {
  border-top-left-radius: 1.25%;
  border-top-right-radius: 1.25%;
  width: 100%;
  height: 100%;
}

.projects > div:nth-child(1) {
  grid-area: h;
  text-align: center;
  font-size: clamp(0.85rem, 12dvh, 3rem);
  background-color: #77cdff6b;
  -webkit-backdrop-filter: opacity(0.25) blur(5px);
          backdrop-filter: opacity(0.25) blur(5px);
}

h1 {
  font-size: clamp(0.85rem, 7dvh, 3rem);
}

.projects > div:nth-child(2) {
  grid-area: c1;
}

.projects > div:nth-child(3) {
  grid-area: c2;
}