.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(to top left, #fff 0%, #fff 50%, #056a4d 50%, #056a4d 100%);
    background-attachment: fixed;
}

.welcome {
    height: 50vh;
    background: linear-gradient(#00000078, #00000082), url(/static/assets/img/peuple_langues-min.jpg);
    background-size: cover;
    background-position: center;
    width: 100vw;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 1rem;
    padding-top: 4rem;
}

.welcome h1 {
    color: white;
    text-transform: uppercase;
    text-align: center;
}

.center {
    text-align: center;
    align-items: center;
    align-content: center;
}

.main-content {
    width: 1100px;
    max-width: 100%;
    padding: 1rem;
    background: white;
    padding-top: 4rem;
    border-radius: 4px;
    position: relative; 
    bottom: 20vh;
}

.main-content .description {
    font-size: 1.1em;
    line-height: 1.6em;
    text-align: center;
    margin-bottom: 2rem;
}

.main-content-bottom {
    bottom: 40vh;
}

.article {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 16rem;
    gap: 1rem;
}

.article .title {
    font-weight: bold;
    text-align: center;
    transition: 0.4s;
}

.article .img-container {
    border-radius: 16px;
    width: 16rem;
    height: 16rem;
    max-width: 90vw;
    background: black;
    align-items: flex-start;
}

.article .img-container img {
    width: 160%;
    transition: 0.4s;
}

.article:hover .img-container img {
    width: 200%;
}

.article:hover .title {
    color: #056a4d;
}