html {
 background: black;
}

body {
 width: 100%; 
}

p, h2 {
 color: white; 
}

.container {
 width: 375px;
 height: 500px; 
 overflow-y:scroll; 
  display: grid;
 grid-template-areas:
    "tl tr tr"
    "bl bl br";
 grid-template-columns: 1fr 1fr 1fr;
  
  h2 {
    display: inline-block;
  }
  
  p {
    display: inline-block;
  }
  
}

.container > .tl{
  grid-area: tl; 
 grid-row: 1;
 grid-column: 1; 
}

.container > .tr{
  grid-area: tr; 
 grid-row: 1;
 grid-column: 2 / span 2; 
}

.container > .bl{
  grid-area: bl; 
 grid-row: 2;
 grid-column: 1 / span 2; 
}

.container > .br{
  grid-area: br; 
 grid-row: 2;
 grid-column: 3; 
}

.kiro{
  background-image:url('https://i.ibb.co/JR5Zd7y/maxresdefault.jpg');
  background-size: 375px;
  display: inline-block;
  h2 {
         color: yellow; 
         text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000; 
       }
  a {
	      background-color: rgba(242, 97, 56, 0.7);
	      color: #cdfeac;
      }
  p {
        background-color: #cdfeac;
        color: black;
      }
}

.rei {
        background-image:url('https://file.garden/aEnK9GK7YhOgwBQV/images/hd-halftone-corner-orange-gradient-transparent-png-701751694611087byncxoib6r.png'); 
        background-size: 100%;
        display: inline-block;
        
        h2 {
         color: orange;
         }
         
         p {
        background-color: rgba(255,135,21,0.6);
      }
}

.kalala {
        background-image:url('https://file.garden/aEnK9GK7YhOgwBQV/images/DSC_4572-600x450.jpg'); 
        background-size: 100%;
        display: inline-block;
        a {
	      color: white;
        }
        
        h2 {
         text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000; 
         color: #bcbcbc; 
        }
        
        p {
         text-shadow: 1px 1px 0 #e69138, -1px -1px 0 #e69138, -1px 1px 0 #e69138, 1px -1px 0 #e69138;  
        }
        
      }
 
.shaa {
        background-image:url('https://file.garden/aEnK9GK7YhOgwBQV/images/209130.jpg'); 
        background-size: 100%;
        display: inline-block;
        p {
          color: #0b50f4;
          text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff;
        }
        
        a {
         color: #cc0000; 
        background-color: rgba(243,246,244,0.6);
        }
        
        h2 {
         color: white;
         text-shadow: 1px 1px 0 #4fa0fc, -1px -1px 0 #4fa0fc, -1px 1px 0 #4fa0fc, 1px -1px 0 #4fa0fc;
        }
        
      }
      
.sian {
        background-image:url('https://file.garden/aEnK9GK7YhOgwBQV/images/10028.jpg'); 
        background-size: 100%;
        display: inline-block;
        h2 {
         color: red; 
        }
        
        a {
          background-color: rgba(37,33,33,0.6);
          color: #ffd966;
        }
        
        p {
         color: #ffe9cc;
         background-color: rgba(244,67,54,0.7);
        }
        
      }

.pipi {
        background-image:url('https://file.garden/aEnK9GK7YhOgwBQV/images/MA-801_Recorder_Solid_color-1.jpg'); 
        background-size: 100%;
        display: inline-block;
        h2 {
         color: #747979;
        }
        
        a {
         color: #b7fffe; 
        }
        
        p {
         color: #eff9f9;
         background-color: rgba(4,146,146,0.65);
        }
        
      }