@import url("https://fonts.googleapis.com/css2?family=Lato&family=Kanit&family=Aldrich&display=swap");
/*Colors*/
/*Gaps*/
/*Breakpoints*/
.jumbotron {
  height: 70vh;
  display: flex;
  align-items: center;
}
.jumbotron h1 {
  font-size: 3.5rem;
}

.slogan {
  text-align: center;
}

.services {
  -webkit-margin-before: 2rem;
  margin-block-start: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.intro {
  -webkit-margin-before: 2rem;
  margin-block-start: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.intro p {
  max-width: 65ch;
}

.photo {
  text-align: center;
}
.photo img {
  -webkit-clip-path: polygon(100% 0, 100% 90%, 10% 100%, 0 90%, 0 0);
          clip-path: polygon(100% 0, 100% 90%, 10% 100%, 0 90%, 0 0);
  order: 1;
}

@media (min-width: 40em) {
  .intro {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
  }
  .jumbotron h1 {
    font-size: 6rem;
  }
  .jumbotron p {
    font-weight: bold;
    font-size: 1.6rem;
  }
  .services {
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .services > article {
    text-align: left;
    max-width: 45%;
  }
}
.card#IBB {
  background-image: url(../imgs/projects/IBB.png);
}

@media (max-height: 400px) {
  .jumbotron {
    height: 110vh;
  }
}
/*# sourceMappingURL=index.css.map *//*# sourceMappingURL=index.css.map */