*,
*::after,
*::before {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Roboto", "sans-serif";
}

h1,
h2,
h3 {
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
}

.icon {
  height: 2rem;
}

.container {
  width: 80%;
  margin: 0 auto;

  max-width: 1200px;
}

.header {
  padding: 2em 0;
  background-image: url("./img/bg.svg");
  background-repeat: no-repeat;
  background-size: 100%;

  .header__wrapper {
    display: grid;
    justify-content: center;
    grid-template-areas:
      "image"
      "text"
      "about";
    gap: 2em;

    .header__image {
      grid-column: 1;
      grid-row: image/text;
    }

    .header__title {
      grid-column: 1;
      grid-row: text;

      font-family: "Playfair Display", "sans-serif";
      font-size: 3rem;
      color: #fff;
      font-weight: 400;
      padding: 0 0.25em;
    }

    .about {
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 2em;

      .overlap {
        display: none;
      }

      h2 {
        font-family: "Playfair Display", "sans-serif";
        font-size: 2rem;
        font-weight: 400;
      }

      .about__text {
        text-align: justify;
      }

      .links {
        display: flex;
        justify-content: space-around;
      }
    }
  }
}

.projects {
  h2 {
    font-family: "Playfair Display", "sans-serif";
    font-size: 2rem;
    font-weight: 400;
    text-align: center;
  }

  .cards {
    padding: 2em 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr));
    gap: 2em;
  }

  .card {
    box-shadow: 0px 0px 3px 0px;

    .icon {
      height: 1.5rem;
    }

    .card__image {
      padding: 1em;
      min-height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: "Playfair Display", "sans-serif";
      font-size: 2rem;
      text-align: center;
      background-color: #7c75ca;
      color: white;
    }

    .card__content {
      padding: 1em;
    }

    .card__heading {
      display: flex;
      justify-content: space-between;
      gap: 1em;
      flex-wrap: wrap;
    }

    .card__name {
      font-family: "Playfair Display", "sans-serif";
    }
  }
}

.footer {
  background-color: #0891b2;
  color: white;

  h2 {
    font-family: "Playfair Display", "sans-serif";
  }

  .footer__content {
    padding: 2em 0;
  }

  .icon {
    height: 1.5rem;
  }

  .links {
    display: flex;
    gap: 2rem;
  }

  .footer__image {
    width: 100%;
  }
}

@media (min-width: 700px) {
  .header {
    padding: 3em 0;

    .header__wrapper {
      position: relative;
      z-index: 0;

      grid-template-areas: none;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
      gap: 0;

      .header__image {
        z-index: 1;
        grid-row: 1/5;
        grid-column: 1/5;
      }

      .header__title {
        z-index: 2;

        grid-row: 1/2;
        grid-column: 4/9;
        justify-self: center;
        align-self: center;

        font-size: clamp(2rem, 6.5vw, 3rem);
      }

      .about {
        z-index: 0;

        display: block;

        grid-row: 2/8;
        grid-column: 2/9;

        background-color: #fff;

        font-size: 1.5rem;

        box-shadow: 0px 0px 4px 0px;

        .overlap {
          display: block;
          width: calc(3 / 7 * 100%);
          height: 50%;
          float: left;

          margin-left: 1em;
        }

        .about__wrapper {
          margin: 15% 0;
        }

        .about__title {
          font-size: clamp(2rem, 6vw, 3rem);
        }

        .about__text {
          padding: 1em;
          font-size: clamp(1rem, 3.75vw, 3rem);

          color: rgb(67, 67, 67);
        }

        .links {
          justify-content: end;
          gap: 1em;
          padding: 0 1em;

          .icon {
            height: 5vw;
          }
        }
      }
    }
  }

  .projects {
    .cards {
      grid-template-columns: repeat(2, minmax(min(10rem, 100%), 1fr));
    }
  }

  .flex {
    display: flex;
    gap: 2em;
  }

  .footer {
    .footer__image {
      width: 50%;
      object-fit: cover;
      padding: 1em;
    }
  }
}

@media (min-width: 1100px) {
  .header {
    .header__wrapper {
      position: static;

      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

      .header__image {
        grid-row: 1/8;
        grid-column: 1/4;
      }

      .header__title {
        grid-row: 1/8;
        grid-column: 1/4;
        font-size: 2rem;
        align-self: end;

        font-size: clamp(2rem, 3.5vw, 4rem);
      }

      .about {
        display: flex;
        gap: 0;
        grid-row: 2/7;
        grid-column: 4/10;

        font-size: 1rem;
        .overlap {
          display: none;
        }

        .about__wrapper {
          margin: 0;
        }

        .about__title {
          font-size: clamp(2rem, 4vw, 3rem);
        }

        .about__text {
          font-size: clamp(1rem, 2vw, 3rem);
        }

        .links {
          .icon {
            height: 2.5vw;
          }

          padding: 1em;
        }
      }
    }
  }
  .projects {
    .cards {
      grid-template-columns: repeat(3, minmax(min(10rem, 100%), 1fr));
    }
  }
}