@supports (animation-timeline: view()) {
  .card {
    --index0: calc(var(--index) - 1); /* 0-based index */
    --reverse-index: calc(var(--numcards) - var(--index0)); /* reverse index */
    --reverse-index0: calc(var(--reverse-index) - 1); /* 0-based reverse index */
  }

  @keyframes scale {
    to {
      transform:
        scale(calc(1.1 - calc(0.1 * var(--reverse-index))));
    }
  }

  #cards {
    --numcards: 4;
    view-timeline-name: --cards-element-scrolls-in-body;
  }

  .card__content {
    --start-range: calc(var(--index0) / var(--numcards) * 100%);
    --end-range: calc((var(--index)) / var(--numcards) * 100%);

    animation: linear scale forwards;
    animation-timeline: --cards-element-scrolls-in-body;
    animation-range: exit-crossing var(--start-range) exit-crossing var(--end-range);
  }
}

* {
  font-family: 'Inter', sans-serif !important;
}
.btn-primary{
  color: white !important;
  text-decoration: none !important;
  font-weight: 600;
}
a:hover{
  cursor: pointer;
}
h1{
  font-size: 1.75em;
  font-weight: 500;
}
.offcanvas {
  font-size: .7em;
}

.txt-intro{
font-weight: 500;
}

.badge{
  font-weight: 400;
}

.imagAvatar {
  background: url('../images/me-eric-orias.png') no-repeat center;
  background-size: cover;
}
.txtPencil{
  font-family: "Borel", serif !important;
  font-weight: 400;
  font-style: normal;
  background: linear-gradient(130deg, #d78943, #eb5956 25%, #5370e9, #5370e9, #27ae60 75%);

  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
.opacity {
  opacity: .46;
}
.card__content {
  font-family: 'Inter', sans-serif;
}

main h2{
  font-weight: 500;
  font-size: 1.75em;
}
main p{
  font-weight: 400;
  font-size: 1em;
}
main .badge{
  font-size: .75em;
}
.small{
  font-size: .75em !important;
}
.bold{
  font-weight: 600;
}

header {
  width: 50vw;
}

.offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm, .offcanvas-xl, .offcanvas-xxl {
  --bs-offcanvas-width: 40vh !important;
}

@media only screen and (max-width: 960px) {
  header {
    width: 70vw;
  }
  main {
    width: 90vw;
  }
  #cards{
    display: block;
  }
  .card__content > div{
    width: 100%;
    padding: 24px;
  }
  
  .card__content {
    grid-template-columns: 2fr 1fr;
    display: flex;
    flex-direction: column-reverse;
  }
  .card__content > figure {
    height: 40vh;
  }
  main h2{
    font-weight: 600;
    font-size: 1.5em;
  }
  main p{
    font-weight: 300;
    font-size: .875em;
  }

  .offcanvas {
    font-size: 1em;
  }
  .offcanvas .badge {
    font-size: .75em;
  }

}