.features-container {
  position: relative;
  padding: var(--spacing-xl) var(--spacing-lr);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
  align-items: center ;
  height: 100svh;
}
.features-container:first-child {
  align-self: start;
}
.features-container:last-child {
  align-self: end;
}

.feature {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  justify-content: center;
  height: fit-content;
}

.feature img {
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
}

.feature:first-child {
  align-self: start;
}

.feature:nth-child(2) {
  align-self: center;
}

.feature:last-child {
    align-self: end;
}

.feature h2, .feature p{
  text-align: center;
}

@media (max-width: 1000px) {
    .features-container {
        grid-template-columns: repeat(2, 1fr);
        height: auto;
        justify-content: center;
    }

    .feature:last-child {
        grid-column: span 2;
    }

    .feature:last-child h2, .feature:last-child p {
        width: 50%;
        margin: auto;
    }

    .feature img {
      width: 80%;
      margin: auto;
    }

    .feature:last-child img {
      width: 40%;
      margin: auto;
    }
}

@media (max-width: 600px) {
    .features-container {
        display: flex;
        flex-direction: column;
    }

    .feature h2, .feature p {
        width: 100%;
        margin: auto;
    }

    .feature img, .feature:last-child img  {
        width: 70%;
        margin: auto;
    }

     .feature:first-child, .feature:nth-child(2), .feature:last-child {
        align-self: center;
    }

     .feature:last-child {
        grid-column: auto;
    }

    .feature:last-child h2, .feature:last-child p {
        width: 100%;
    }
}