h2 {
  text-align: left;
}
section {
  width: 100%;
  position: relative;
}
.intro {
  margin: 5rem 0;
  padding: 0 5%;
}
.intro .info{
    width: 50%;
}
.intro .image-container{
    width: 40%;
}
.value{
    background-color: var(--primary);
    padding: 0;
}
.value .info{
    width: 60%;
    padding: 0 5%;
}
.value h3, .value p, .value li{
    color: var(--white);
}
.value h3{
    margin: 2rem 0;
}
.value li{
    list-style: disc;
    /* list-style-position: inside; */
    padding-left: 1rem;
    margin-bottom: 1rem;
}
.value .image-container{
    width: 40%;
}

/* -------------------------------------------------- MEDIA QUERIES --------------------------------------------------- */


@media screen and (max-width: 1024px) {
    .intro .info h2{
        width: 120%;
    }
    .value .image-container {
        height: 1300px;
    }
    .value .image-container img {
        height: 100%;
    }
  }

@media screen and (max-width: 550px) {
    h2{
        text-align: center;
    }
    .intro .info, .value .info {
        width: 100%;
    }
    .intro .info h2{
        width: 100%;
    }
    .intro .image-container{
        width: 50%;
    }
    .value{
        padding-top: 5%;
        flex-direction: column-reverse;
    }
    .value .image-container {
        height: 400px;
        width: 100%;
        margin-top: 2rem;
    }
    .intro .image-container img {
        height: 100%;
    }
  }

@media screen and (max-width: 375px) {
    .intro .image-container{
        margin-top: 2rem;
    }
  }