.about * {
  font-family: "Montserrat", sans-serif;
}
.about {
  background: var(--bg-dark);
  .heading {
    color: var(--accent);
    font-weight: 700;
    text-align: start;
  }
  .introduction {
    text-align: start;
  }

  .image {
    background: url("../assets/profile.png");
    background-size: cover;
    background-position: center;
    box-shadow: 0px 4px 15px -2px #0f4878 inset,
      0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    max-width: 400px;
    max-height: 400px;
    width: 40vw;
    height: 40vw;
    border-radius: 50%;
    margin: 0 auto;
  }
  /* .image { */
  /*   width: 90vw; */
  /*   height: 90vw; */
  /* } */

  .paragraph {
    color: var(--text-primary);
    font-size: 1.4rem;
    line-height: 2rem;
    margin-bottom: 2rem;

    transition: all var(--transition-speed) ease;
  }

  .paragraph p {
    margin-top: 1rem;
    /* Those change in toggleAbout.js */
    opacity: 0;
    /* transform: translateY(-100%); */
    padding-bottom: 2rem;
    z-index: -1;
    transition: all var(--transition-speed) ease;
  }

  /* .hidden { */
  /*   transition: all var(--transition-speed) ease; */
  /* } */

  /* .hidden p { */
  /*   z-index: -1; */
  /*   opacity: 0; */
  /* } */
  /* .active p { */
  /*   opacity: 1; */
  /*   display: block; */
  /* } */

  .toggle-about {
    border: none;
    background: none;
    color: var(--accent);
    font-weight: 700;
    text-align: center;
    font-size: 1rem;
  }
  .toggle-about svg {
    position: relative;
    top: 0.25rem;
  }
  .toggle-about:hover {
    cursor: pointer;
  }
}

@media only screen and (min-width: 768px) {
  .about {
    padding: 10rem 10vw 2rem 10vw;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 4rem 4rem;

    .grid-item.full-width {
      grid-column: 1 / span 2;
    }
    .paragraph {
      margin-left: 5rem;
    }
    .content {
      margin: 0 auto;
      max-width: 60vw;
    }
    .subheading {
      margin: max(2vw, 2rem) 0;
    }
    .introduction {
      /* min-font-size: 1.5rem; */
      font-size: max(1.5rem, 2vw);
    }
    .hidden {
      height: 1rem;
    }
    .active {
      height: 10rem;
      padding-bottom: 2rem;
    }
  }
}
@media only screen and (max-width: 768px) {
  .about {
    display: grid;
    grid-template-columns: 1fr;
    padding: 0 2rem;
    gap: 1rem;

    .heading {
      font-size: 2rem;
    }
    .subheading {
      font-size: 1.5rem;
      margin: 2rem 0;
    }
    .paragraph p {
      padding-bottom: 5rem;
    }

    background: var(--bg-dark);
    .image {
      background-size: cover;
      background-position: center;
      box-shadow: 0px 4px 15px -2px #0f4878 inset,
        0px 4px 4px 0px rgba(0, 0, 0, 0.25);
      width: 80vw;
      height: 80vw;
      border-radius: 50%;
      margin: 0 auto;
    }
    .hidden {
      height: 5rem;
    }
    .active {
      height: 30rem;
    }
  }
}