.keypoints-grid {
    display: var(--display-grid);
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-xl);
}

.keypoints-item {
    display: var(--display-flex);
    flex-direction: var(--flex-direction);
    align-items: flex-start;
    gap: var(--gap-sm);
}

.keypoints-image {
    width: var(--width-100);
    height: var(--height-auto);
    object-fit: cover;
}

.keypoints-heading {
    margin: var(--margin-0);
}

.keypoints-buttons {
    display: var(--display-flex);
    flex-wrap: var(--flex-wrap);
    gap: 8px;
}

.keypoints-button {
    display: var(--display-inline-block);
    padding: 8px 16px;
    border: var(--border-basic);
    text-decoration: var(--text-decoration);
}
@media (max-width: 768px) {
    .keypoints {
        padding: 24px 0;
    }
    .keypoints-grid {
        grid-template-columns: var(--grid-template-columns-1);
        gap: var(--gap-md);
    }
    .keypoints-item {
        align-items: center;
        text-align: center;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .keypoints-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gap-lg);
    }
}

@media (min-width: 1300px) {
    .keypoints {
        padding: 32px 0;
    }
    .keypoints-grid {
        gap: var(--gap-lg);
    }
}