Responsive eksempel

prosjekter.scss

.prosjekter{
  display: grid;
  width: 100vw;
  
  .project-organizer{
    display: grid;
    justify-self: center;
    overflow-x: hidden;
    justify-content: center;
    margin-bottom: 5em;
  
    .projects-title{
      width: 450px;
      font-family: "Ibarra Real Nova", serif;
      letter-spacing: 5px;
      margin: 10vh 0;
      font-size: 40px;
      font-weight: lighter;
      border-bottom: black solid 2px;
      text-align: center;
      justify-self: center;
      height: auto;
      padding-bottom: 0.5em;
    }
  
    .project-cards{
      display: grid;
      width: 59vw;
      grid-template-columns: repeat(auto-fill, minmax(355px, 1fr));
      column-gap: 2em;
      row-gap: 4em;
      justify-content: center;
    }
  }
}

@media (min-width: 360px) and (max-width: 360px) {
  .prosjekter{
    
    .project-organizer{
      .projects-title{
        width: 87vw;
        font-size: 35px;
        justify-self: center;
      }
      
      .project-cards{
        margin-left: 5%;
        width: 90vw;
        column-gap: 0;
      }
    }
  }
}
 
 
@media (min-width: 375px) and (max-width: 375px) {
  .prosjekter{
    
    .project-organizer{
      .projects-title{
        width: 87vw;
        justify-self: center;
        font-size: 35px;
      }
      
      .project-cards{
        margin-left: 3%;
        width: 90vw;
        column-gap: 0;
      }
    }
  }
}

@media (min-width: 400px) and (max-width: 480px) {
  .prosjekter{
    
    .project-organizer{
      .projects-title{
        width: 87vw;
        justify-self: center;
        font-size: 35px;
      }
      
      .project-cards{
        margin-left: 4%;
        width: 90vw;
        column-gap: 0;
      }
    }
  }
}

@media (max-width: 375px) and (min-height: 812px) {
  .prosjekter{
    
    .project-organizer{
      .projects-title{
        width: 87vw;
        justify-self: center;
        font-size: 35px;
      }
      
      .project-cards{
        margin-left: 0%;
        width: 90vw;
        column-gap: 0;
      }
    }
  }
}

@media (min-width: 900px) and (max-width: 980px){

  .prosjekter{

    .project-organizer{
      margin-left: 5%;

      
      .project-cards{
        width: 90vw;
      }
    }
  }
}