/*  */
/* 
*/
/* Styling for the introduction section to align articles in a column */
#introduction {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Base styling for articles within the introduction section */
#introduction .profile {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%; /* Ensures articles take full width */
    overflow: hidden; /* Prevents any overflow issues */
}

#introduction .profile .text {
    flex: 1;
}

#introduction .profile .image {
    max-width: 400px;
    height: auto;
}

#introduction figure {
    margin: 10px;
}

/* Reverse flex direction for articles with the class "reverse" within the introduction section */
#introduction .profile.reverse {
    flex-direction: row-reverse;
}

/* Responsive adjustments for mobile devices within the introduction section */
@media (max-width: 1025px) {
    #introduction .profile {
        flex-direction: column;
        align-items: flex-start;
    }

    #introduction .profile.reverse {
        flex-direction: column;
    }

    #introduction .profile .image {
        max-width: 100%;
    }
}

#tasks {
  display: flex;
  flex-direction: column; /* Ensures the sections are stacked vertically */
  gap: 20px; /* Adds space between the sections */
}

#tasks section {
  display: flex;
  flex-direction: column; /* Ensures articles within each section are also stacked vertically */
  gap: 20px;
}

#tasks article {
  display: block;
  width: 100%;
}
 
/*  */