.breakout-section {
    padding: 0 10px;
    box-sizing: border-box;
}
.content-section {
    padding: 0 50px;
    box-sizing: border-box;
}
.project-header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  max-width: 48rem;
  min-height: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.project-header {
  margin-bottom: 3rem;
}
.project-video-shadow-wrapper {
  z-index: 0;
  opacity: 0; 
  max-width: 850px;
  height: 500;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
  box-shadow: 0 0 20px 2px #09e85e;
}

.project-image-with-text-wrapper {
  margin: 1rem auto;
  padding: 0;
  display: flex;
  flex-direction: row;
  gap: 3rem;
  justify-content: center;
}
.project-image-with-text-wrapper.text {
  width: 50%;
}

@media (min-width: 320px) and (max-width: 768px) {
  .breakout-section {
    padding: 0;
  }

}

.project-image-grid-wrapper {  
  margin: 1rem auto;
  padding: 0;
  display: flex;
  gap: 3rem;
  justify-content: space-around;
}

@media (min-width: 320px) and (max-width: 768px) {
  .content-section {
    padding: 0;
  }
  .project-image-grid-wrapper {
    width: 90vw;
    flex-direction: column;
    gap: .75rem;
  }

}
.skills-heading-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    justify-self: center;
  }
    
  .skills-badge-wrapper {
    margin-top: 0;
    padding-left: 0;
    display: flex;
    gap: 1rem;
    justify-content: center;
    justify-self: center;
    flex-wrap: wrap;
    list-style: none;
  }

  .skill-badge {
    padding: 5px 15px;
    border: 1px solid var(--light-slate-grey);
    border-radius: 30px;
  }

  @media (min-width: 320px) and (max-width: 470px) {
    .skills-badge-wrapper {
      width: 90vw;
      gap: .25rem;
    }
    .skill-badge {
      padding: 0 10px;
      
    }

  }

  .project-description-wrapper {
    max-width: 80vw;
    margin: auto;
  }