.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(250px, auto);
  margin:10px;
}

.wrapperx1 {
  display: grid;
  grid-template-columns: repeat(1fr);
  grid-template-rows: 100vh;
  align-items: center;
  justify-items: center;
  margin:10px;
  }  

.wrapperx2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows:min100vh;
  align-items: center;
  justify-items: center;
  margin:25px;
  }
  
/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media (max-width: 800px) {
  .wrapperx2 {
	display: flex;
  	flex-direction: column;
  	grid-template-columns:auto;	
  	overflow:hide;
  	margin:0;
  	padding:0;    
  }
}  

  .wrapperx3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    grid-auto-rows: minmax(200px, auto);
    margin:0;
    justify-items: center;
  }

  .wrapperx4 {
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-rows: 100vh;
    grid-gap: 1em;
    align-items: center;
    justify-items: center;
    overflow-y: scroll;
   
    }


  .wrappervideo {
    display: grid;
    grid-template-columns: repeat(1fr);
    grid-template-rows: 100vh;
    align-items: center;
    justify-items: center;
    margin:0;
    }

  .wrapperauto {
  /* We first create a flex layout context */
  display: flex;
  
  /* Then we define the flow direction 
     and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;
  justify-content: space-around;
  /* Then we define how is distributed the remaining space */
  justify-content:center;
  padding: 2em;
  margin-top: 3em;
  list-style: none;


  } 
  
  .flex-item {
    background:rgba(160, 210, 150, 0.5);
    padding: 1em;
    margin: 10px;
    height:250px;
    align-items: center;
    place-self: center;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    

  }

.creationvideo {
  grid-column: 1;
  align-self: center;
  justify-self: center;
  flex: 50%;
  }

.creditcreation{
  grid-column: 2;
  align-self: center;
  justify-self: center;
  flex: 50%;
  }