*{
    margin:0px;
    padding: 0px;
    box-sizing: border-box;
}
body{
    background-color: rgb(1, 46, 1);
    margin: 2%;
    background: linear-gradient(to right, rgba(10, 65, 90, 0.678), rgba(3, 117, 93, 0.5));}
.container{
    padding: 30px;
    display: flex;
    justify-content:space-between ;
    color: silver;
}
.border{
    border: 3px solid silver;
}

.gallery{
    display: grid;
    gap: 6px;
    padding: 20px;
    height: 650px;
    width: 650px;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto auto;
}
.left-text{
    display: flex;
    height: 650px;
    width: 650px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50vw;
}
.sub-text{
    height: 400px;
    width: 400px;
    padding-top: 90px;
}
.heading, .sub-heading{
    margin: 20px;
    padding: 15x;
    font-size: 45px;
    text-align: center;
}
.sub-heading{
    font-size: 20px;
}
.box{
    background-size: cover;
    background-repeat: no-repeat;
    border: none;
    background-color: #222;
    background-blend-mode: hard-light;
    display: flex;
    justify-content: center;
    align-items:center;
    font-size: 20px;
    font-weight: 500;
    transition: all 0.6s ease-in-out;
    cursor: pointer;
}
.box:hover{
    background-color: #999;
    background-position: center;
    box-shadow: 0 0 4px #fff;
}
#b1{
    grid-row: 1/3;
    background-image: url(https://www.bing.com/th?id=OIP.gASMlPqsrIt_9q8Y76PZKgHaFj&w=232&h=211&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2);
}
#b2{
    grid-column: 2/4;
    background-image: url(https://www.bing.com/th?id=OIP.6Axh0-PYY8UQVpfS08w3gwHaE8&w=242&h=211&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2);
}
#b3{
    grid-row: 2/3;
    background-image: url(https://www.bing.com/th?id=OIP.GvntOdvz80txbfbW4rz2kAHaEo&w=242&h=211&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2);
}
#b4{
    grid-row: 2/4;
    background-image: url(https://www.bing.com/th?id=OIP.0WSwZk0xz4jmE-WGeaBjzwHaEL&w=243&h=211&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2);
}
#b5{
    grid-column: 1/3;
    background-image: url(https://www.bing.com/th?id=OIP.Mvcr0QDsGXOx29cSBfXd6AHaE7&w=240&h=211&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2);
}
#b6{
    background-image: url(https://www.bing.com/th?id=OIP.PYhE4o4K6wdJCLqzbKoBrwHaE8&w=240&h=211&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2);
}
#b7{
    grid-column: 2/4;
    background-image: url(https://www.bing.com/th?id=OIP.EfKuvd8N9o-aNDIH2JF7aAHaE8&w=240&h=211&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2);
}

/* media quary */
@media screen and (min-width: 600px) AND (max-width: 1024px) {
    .container{
        flex-direction: column;
        align-items: center;
    }
    .left-text{
        height: 20vh;
    }
    .sub-text{
        padding:0px ;
    }
    .gallery{
        margin-top: 50px;
        padding: 0px;
        height: 1200px;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: repeat(7, auto);
        gap: 5px
    }
    .box{
        height: 150px;
        width: 100%;
    }
    #b1{
        grid-column:  1/4;
        grid-row: 1/2;
    }
    #b2{
        grid-column:  1/4;
        grid-row: 2/3;
    }
    #b3{
        grid-column:  1/4;
        grid-row: 3/4;
    }
    #b4{
        grid-column:  1/4;
        grid-row: 4/5;
    }
    #b5{
        grid-column:  1/4;
        grid-row: 5/6;
    }
    #b6{
        grid-column:  1/4;
        grid-row: 6/7;
    }
    #b7{
        grid-column:  1/4;
        grid-row: 7/8;
    }
}


@media screen and (min-width: 540px) AND (max-width: 699px) {
    .container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .left-text {
        height: auto; 
        margin-bottom: 10px;
    }

    .sub-text {
        padding: 5px;
        height: 200px;
    }

    .gallery {
        margin-top: 30px;
        width: 500px;
        padding: 0;
        height: auto;
        grid-template-columns: 1fr 1fr ;
        grid-template-rows: repeat(7, auto);
        gap: 5px
    }

    .box {
        height: 100px;
        width: 400px;
    }
    .box{
        height: 150px;
        width: 100%;
    }
    #b1{
        grid-column:  1/3;
        grid-row: 1/2;
    }
    #b2{
        grid-column:  1/3;
        grid-row: 2/3;
    }
    #b3{
        grid-column:  1/3;
        grid-row: 3/4;
    }
    #b4{
        grid-column:  1/3;
        grid-row: 4/5;
    }
    #b5{
        grid-column:  1/3;
        grid-row: 5/6;
    }
    #b6{
        grid-column:  1/3;
        grid-row: 6/7;
    }
    #b7{
        grid-column:  1/3;
        grid-row: 7/8;
    }
}



@media screen and (max-width: 539px) {
    .container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .left-text {
        height: auto; 
        margin-bottom: 10px;
    }

    .sub-text {
        padding: 5px;
        height: 200px;
    }

    .gallery {
        margin-top: 30px;
        width: 500px;
        padding: 0;
        height: auto;
        grid-template-columns: 1fr 1fr ;
        grid-template-rows: repeat(7, auto);
        gap: 5px
    }

    .box {
        height: 100px;
        width: 350px;
    }
    .box{
        height: 150px;
        width: 100%;
    }
    #b1{
        grid-column:  1/3;
        grid-row: 1/2;
    }
    #b2{
        grid-column:  1/3;
        grid-row: 2/3;
    }
    #b3{
        grid-column:  1/3;
        grid-row: 3/4;
    }
    #b4{
        grid-column:  1/3;
        grid-row: 4/5;
    }
    #b5{
        grid-column:  1/3;
        grid-row: 5/6;
    }
    #b6{
        grid-column:  1/3;
        grid-row: 6/7;
    }
    #b7{
        grid-column:  1/3;
        grid-row: 7/8;
    }
}