#about {
    width: 100%;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: var(--space-80);
}

.about-container {
    width: 100%;
    max-width: var(--width-contained);
    display: grid;
    justify-content: start;
    align-items: start;
    grid-template-columns: repeat(3, 1fr);
    row-gap: var(--space-16)
}

h1 {
    font-size: var(--fs-61);
    font-weight: 800;
    line-height: 1.2;
    font-family: var(--ff-header);
    -webkit-text-stroke: 2px var(--theme-text);
    grid-column: 1 / 3;
}

.about-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    width: 80%
}

.card-title h2 {
    font-size: var(--fs-20);
    font-weight: 100;
    line-height: 1.2;
    font-family: var(--ff-body);
    opacity: .75;
    display: flex;
    gap: var(--space-16);
}

.about-card p {
    font-size: var(--fs-20);
    font-weight: 100;
    line-height: 1.2;
    font-family: var(--ff-body);
    padding-left: var(--space-32);
}

.about-card ul {
    font-size: var(--fs-20);
    font-weight: 100;
    line-height: 1.2;
    font-family: var(--ff-body);
    padding-left: var(--space-48);
    display: flex;
    flex-direction: column;
    gap: 4px;
    list-style-type: disc;
}

.card-title {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--space-32);
    width: 100%
}

.card-1 {
    grid-column: 3 /4;
    grid-row: 1 /2;
}

.card-2 {
    grid-column: 2 /3;
    grid-row: 2 /3;
}

.card-3 {
    grid-column: 1 /2;
    grid-row: 3 /4;
}

.card-4 {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
}

.card-5 {
    grid-column: 3 / 4;
    grid-row: 4 / 5;
}

.img-wrapper {
    grid-column: 2 / 3;
    grid-row: 3 / 5;
    width: 100%
}

.img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

.smiley-faces {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
    display: flex;
    gap: var(--space-8);
}

.justify-end {
  justify-self: end;
}

.upside-down {
    transform: rotate(180deg);
}

@media (max-width: 768px) {
  .about-container {
    grid-template-columns: 1fr;
    max-width: var(--inline-margin);
    row-gap: var(--space-32);
  }

  h1 {
    grid-column: 1;
    grid-row: 1;
  }

  .card-1 {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }

  .card-2 {
    grid-column: 1;
    grid-row: 3;
    justify-self: end;
  }

  .img-wrapper {
    grid-column: 1;
    grid-row: 4;
    width: 70%;
    justify-self: center;
  }

  .smiley-faces {
    grid-column: 1;
    grid-row: 5;
    justify-content: center;
    gap: var(--space-40);
  }

  .card-3 {
    grid-column: 1;
    grid-row: 6;
    justify-self: start;
  }

  .card-4 {
    grid-column: 1;
    grid-row: 7;
    justify-self: end;
  }

  .card-5 {
    grid-column: 1;
    grid-row: 8;
    justify-self: start;
  }

  .about-card {
    width: 80%;
  }

  .justify-end {
    justify-self: auto;
  }

  .card-2,
  .card-4 {
    align-items: flex-end;
  }

  .card-2 .card-title,
  .card-4 .card-title {
    align-items: flex-end;
  }

  .card-2 p,
  .card-4 p {
    text-align: right;
    padding-left: 0;
    padding-right: var(--space-32);
  }

  .card-2 .card-title h2,
  .card-4 .card-title h2 {
    flex-direction: row-reverse;
  }
}