.commitment {
  padding: 10rem 5rem;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 5rem;
}

.commitment-img {
  background-image: url(desktop/image-commitment.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  max-width: 25rem;
  width: 20rem; 
  height: 30rem;
  border-radius: 0.5rem;
  margin: 0 auto;
}

.commitment-text {
  align-self: center;
}

.commitment-title {
  color: var(--darker-cyan);
  margin-bottom: 2.5rem;
}

@media screen and (max-width: 1000px) {
  .commitment {
    padding: 10rem 0;
    gap: 2.5rem;
  }

  .commitment-img {
    background-image: url(tablet/image-commitment.jpg);
    min-width: none;
  }
}

@media screen and (max-width: 798px) {
  .commitment {
    grid-template-columns: 1fr;
    padding: 10rem 3rem;
  }
  
  .commitment-img {
    background-image: url(mobile/image-commitment.jpg);
    height: 25rem;
  }

  .commitment-text {
    text-align: center;
  }
}

@media screen and (max-width: 540px) {
  .commitment {
    padding: 10rem 1rem;
  }
}

@media screen and (max-width: 376px) {
  
}

@media screen and (max-width: 356px) {
  .commitment-img {
    width: 100%;
  }
}