.technologiesContainer {
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 100vh;
  height: 100%;
  gap: 3rem;
  padding: 3rem;
}

.experienceTitle {
  font-size: 3rem;
}

.experienceContainer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.experienceInnerContainer {
  margin: 1.5rem;
  flex: 0 1 27%;
}

.experienceItemContainer {
  border: 1px solid white;
  padding: 1rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%
}

.experienceItemTitle {
  text-align: left; 
  white-space: nowrap;
  font-size: 2rem;
}

.experienceList {
    padding-inline-start: 2em;
}

.experienceListItem {
  font-size: 1.5rem;
}


@media screen and (max-width: 1000px) {
  .experienceInnerContainer {
    flex: 0 1 37%;
  }
}

@media screen and (max-width: 800px) {
  .experienceInnerContainer {
    flex: 0 1 43%;
  }
}

@media screen and (max-width: 675px) {
  .technologiesContainer {
    gap: 1rem;
  }
  .experienceTitle {
    font-size: 2.5rem;
    padding-top: 2rem;
  }
  .experienceContainer { 
    overflow-y: scroll;
  }
  .experienceInnerContainer {
    justify-content: center;
    flex: 0 1 65%;
  }
  .experienceItemTitle {
    text-align: center; 
    white-space: nowrap;
    font-size: 1.7rem;
  }  
  .experienceListItem {
    font-size: 1.2rem;
  }
}

@media screen and (max-width: 500px) {
  .technologiesContainer {
    gap: 1rem;
  }
  .experienceTitle {
    font-size: 2rem;
    padding-top: 1.5rem;
  }
  .experienceContainer { 
    overflow-y: scroll;
  }
  .experienceInnerContainer {
    justify-content: center;
    flex: 1
  }
}

@media only screen 
  and (max-width: 1024px) 
  and (orientation: landscape) {
    .technologiesContainer {
      gap: 1rem;
    }
    .experienceContainer { 
      overflow-y: scroll;
    }
  }

