*{
    margin: 0;
}
body {
		font-family: Roboto Mono;
		color: #646464;
        background-color: #191919;
}

::-webkit-scrollbar {
    display: none;
}

.container {
	 
		display: grid;
		grid-template: repeat(25, 1fr) / repeat(21, 1fr);

		@media (orientation: landscape) {
			height: 82vh;
			padding: 38px 16px;
			gap: 4px;
		}
}

.item {
	
	object-fit: cover;
	width: 100%;
	height:100%;
	transition: transform .4s;
	cursor: pointer; 
	
	@media (orientation: landscape) {
			border-radius: 2px;
		}
	@media (orientation: portrait) {
			border-radius: 2px;
	}
	
}

.item:hover{
    transform: scale(1.2);
}

.item:hover{
	object-fit: contain;
}

.item2 {
	grid-area: 3/9/6/11;
    
}

.item3 {
	grid-area:  1/11/6/14;
    transition: transform .4s;
    cursor: pointer; 
}

.item4 {
	grid-area:  3/14/8/16;
    transition: transform .4s;
    cursor: pointer; 
}

.item5 {
	grid-area: 8/6/12/9;
     transition: transform .4s;
    cursor: pointer; 
}

.item6 {
	grid-area: 6/9/12/14;
     transition: transform .4s;
    cursor: pointer; 
}

.item7 {
	grid-area: 8/14/12/17;
     transition: transform .4s;
    cursor: pointer; 
}
.item30{
    grid-area: 2 / -3 / 6 / 16;
     transition: transform .4s;
    cursor: pointer; 
}

.item8 {
	grid-area: 6/16/8/17;
     transition: transform .4s;
    cursor: pointer; 
}
.item9 {
	grid-area: 6/17/12/20;
     transition: transform .4s;
    cursor: pointer; 
}
.item10 {
	grid-area: 9/20/12/21;
     transition: transform .4s;
    cursor: pointer; 
}
.item11 {
	grid-area: 14/1/18/3;
     transition: transform .4s;
    cursor: pointer; 
}
.item12 {
	grid-area: 12/3/18/8;
     transition: transform .4s;
    cursor: pointer; 
}
.item13 {
	grid-area: 12/8/16/11;
}

.item14 {
	grid-area: 12/11/18/16;
}

.item15 {
	grid-area: 12/16/16/19;
}

.item16 {
	grid-area: 12/19/16/22;
}

.item17 {
	grid-area: 18/3/22/5;
}

.item18 {
	grid-area: 18/5/21/8;
}

.item19 {
	grid-area: 16/8/21/10;
}

.item20 {
	grid-area: 16/10/18/11;
}

.item21 {
	grid-area: 18/10/24/13;
}

.item22 {
	grid-area: 18/13/22/16;
}

.item23 {
	grid-area: 16/16/21/18;
}

.item24 {
	grid-area: 16/18/22/21;
}

.item25 {
	grid-area: 21/5/26/7;
}

.item26 {
	grid-area: 21/16/25/18;
}

.item27 {
	grid-area: 22/18/24/19;
}

.item28 {
	grid-area: 7/4/12/6;
}

.item29 {
	grid-area: 21/7/25/10;
}


/* mobile version  */

@media (max-width: 580px){

    .container{
        display: flex;
        flex-direction: column;
        height: auto;
        gap: 2rem;
        padding: 16px;
    }

    .item{
        width: 100%;
    }

    img{
        width: 100%;
        height: auto;
        max-width: 100%;
		border: 2px solid white;
    }
	.item:hover{
    transform: scale(1);
	}
	.heading{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
}



a{
	color: #646464;	
	text-decoration: none;
}

a:hover{
	color: white;
}