.article.left {
    transition: opacity 2s ease-out, transform 2s ease-out;
    transform: translateX(-50px);
}
.article.right {
    transition: opacity 2s ease-out, transform 2s ease-out;
    transform: translateX(50px);
}
.article.visible {
    opacity: 1;
    transform: translateX(0);
}
.introduction-text {
    opacity: 0; 
    transition: opacity 2s ease-in-out;
}
.introduction-text.visible {
    opacity: 1; 
}
.photo {
    opacity: 0;
    transition: opacity 1s ease-in-out; 
}
.photo.visible {
    opacity: 1; 
}
@media (max-width: 768px) {
    .article.left {
        transition: none;
        transform:  none;
    }
    .article.right {
        transition: none;
        transform:  none;
    }
  .hidden-mobile {
    display: none;
  }
}