.galerie{
  margin-top:2%;
	position:relative;
	margin-left:1%;
  display:block;
  border-radius: 8px;
  width: 98%;
  max-width:100vw;
  height:auto;
	font-size:large;
	float:left;
	border-radius: 8px;
  /*box-shadow: inset 0 0.5px 0 #fff3, 0 0 1px #000;*/
  background-color: transparent;
  z-index:-1;
  }


  .Text-gallery{
    margin-left:1%;
    display:flex;
    position:relative;
    background-color: transparent;
    border-radius: 8px;
    width: 98%;
    max-width:100vw;
    height:10vh;
    /*box-shadow: inset 0 0.5px 0 #fff3, 0 0 1px #000;*/
    z-index:-1;
    justify-content: center;	
  }
  
  
  .gallery-title{
    margin-top:10%;
    position:relative;
    display:flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    width:100%;
    height:28%;
    max-width:100vw;
    border-radius: 8px;
    justify-content: center;
    /*box-shadow: inset 0 0.5px 0 #fff3, 0 0 1px #000;*/
    font-family: Arial, Helvetica, sans-serif;	
  }

  .gallery-title H1{
    color:black;
    font-weight: bold;
    font-size:2.5vw;
  }

  .text-galleries{
    margin-top:1%;
    position:relative;
    display:flex;
    text-align: center;
    justify-content: center;
    background-color: transparent;
    width:45%;
    height:10vh;
    border-radius: 8px;
    /*box-shadow: inset 0 0.5px 0 #fff3, 0 0 1px #000;*/
    font-family: Arial, Helvetica, sans-serif;
    font-size:1.6vw;
    color:black;
  }

  .gallery-title ul{
    font-size:4em;
    color:black;
    font-weight: bold;
  }

.grid {
    display: grid;
    grid-template-rows: 
      repeat(8, 180px);
    grid-template-columns: 
      repeat(3, 1fr);
    grid-gap: 5px;
  }
  
  .item:nth-child(1) {
    grid-row:span 2;
    grid-column:1;
  }
  
  .item:nth-child(2) {
    grid-column:span 1;
    grid-row:span 2;
  }
  
  .item:nth-child(3) {
    grid-column:span 1;
    grid-row:span 2;
  }
  
  .item:nth-child(4) {
    grid-column: span 1;
    grid-row: span 2;
  }
  
  .item:nth-child(5) {
    grid-column: span 1;
    grid-row: span 2;
  }

  .item:nth-child(6) {
    grid-column: span 1;
    grid-row: span 2;
  }
  
  .item:nth-child(7) {
    grid-column: span 1;
    grid-row: span 2;
  }
  
  .item:nth-child(8) {
    grid-column: span 1;
    grid-row: span 2;
  }

  .item:nth-child(9) {
    grid-column: span 1;
    grid-row: span 2;
  }
  
  .item:nth-child(10) {
    grid-column: span 1;
    grid-row: span 2;
  }
  
  
  .item:nth-child(11) {
    grid-column: span 1;
    grid-row: span 2;
  }
  
  
  .item:nth-child(12) {
    grid-column: span 1;
    grid-row: span 2;
  }
  
  
  /* styling code */
  
  .grid {
    margin:20px auto;
    max-width:100vw;
  }
  
  .grid > .item {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  @media screen and (max-width: 820px){
    
      .gallery-title H1{
        font-size:4.5vw;
      }
      .text-galleries{
        width:80%;
        height:auto;
        font-size:3.5vw;
        color:black;
      }

    .grid {
        display: grid;
        grid-template-rows: 
          repeat(5, 180px);
        grid-template-columns: 
          repeat(2, 1fr);
        grid-gap: 5px;
      }
      
      .item:nth-child(1) {
        grid-column: 1/2;
        grid-row: 1/2;
      }
  
      .item:nth-child(2) {
        grid-column: 2/2;
        grid-row: 1/2;
      }

      .item:nth-child(3) {
        grid-column: 1/2;
        grid-row: 2/3;
      }

      .item:nth-child(4) {
        grid-column: 2/2;
        grid-row: 2/3;
      }

      .item:nth-child(5) {
        grid-column:span 2;
        grid-row: 3/3;
      }
      .item:nth-child(6) {
        grid-column:1/2;
        grid-row: 4/5;
      }

      .item:nth-child(7) {
        grid-column:2/2;
        grid-row: 4/5;
      }

      /* styling code */
      
      .grid {
        margin:20px auto;
        max-width:100vw;
      }
      
      .grid > .item {
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }
  }
