@media only screen and (min-width: 0px) {
  .companyBanner {
    background-image: linear-gradient(rgba(25, 36, 54, 0.8), rgba(25, 36, 54, 0.64)), url(../images/projectsBackground.jpg);
    background-size: cover;
    background-position: center;
  }
  .companyBanner .companyContainer a button:hover {
    cursor: pointer;
  }
  .projectsContainer .servicesContainer {
    display: grid;
    gap: 3em;
  }
  .projectsContainer .servicesContainer ul {
    list-style: none;
  }
  .projectsContainer .servicesContainer ul li.serviceItem {
    display: grid;
    grid-gap: 1em;
    border-radius: 0.5em;
    margin: 1em;
  }
  .projectsContainer .servicesContainer ul li.serviceItem img {
    border-radius: 0.625em;
  }
  .projectsContainer .servicesContainer ul li.serviceItem .descriptionContainer {
    display: grid;
    gap: 1em;
  }
  .projectsContainer .servicesContainer ul li.serviceItem .descriptionContainer h2 {
    font-size: 1.75em;
  }
  .projectsContainer .servicesContainer ul li.serviceItem .descriptionContainer .briefDescription {
    font-family: Georgia, "Times New Roman", Times, serif;
    color: #707070;
    font-size: 1.125em;
  }
  .projectsContainer .servicesContainer ul li.serviceItem .descriptionContainer a {
    max-width: fit-content;
  }
  .projectsContainer .servicesContainer ul li.serviceItem .descriptionContainer a .learnMoreBtn {
    border-radius: 0.5em;
    color: #192436;
    font-size: 1em;
    cursor: pointer;
    border: 1px solid #303030;
    background: rgba(226, 205, 26, 0.16);
    padding: 16px;
    transition: all, 0.5s ease-in-out;
  }
  .projectsContainer .servicesContainer ul li.serviceItem .descriptionContainer a :hover {
    cursor: pointer;
    background: #192436;
    color: #e2cd1a;
  }
}
@media only screen and (min-width: 768px) {
  .servicesContainer ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .servicesContainer ul li.serviceItem {
    max-width: 45%;
  }
}