* {
    box-sizing: border-box;
}

body {
    margin:0;
    background-color: rgb(119, 155, 113);
}

p {
    font-family:'Tiro Telugu', serif;
    margin-left: 15px;
}

.main-container {
    background:rgb(119, 155, 113);
    width:100vw;
    height:100vh;
    display:flex;
    flex-direction:column;
    padding:20px;


}

.lower {
    margin:auto;
    background:rgb(41, 40, 40);
    height:75%;
    width:85%;
    display:flex;
    padding:20px;
    gap:15px;
}

.lower-item {
    background:rgb(250, 242, 231);
    width:100%;
    height:100%;
    display:flex;
    flex-direction: column;
    padding:20px;
    gap:10px;

}

.lower-quarter {
    background:white;
    width:100%;
    height:100%;
    display:flex;
    padding:10px;
    gap:10px;
}

.two {
    background: rgb(250, 242, 231);
    width:100%;
    height:100%;
    display:flex;
    flex-direction: column;
    padding:20px;
    gap:10px;

}
.lower-two {
    background:rgb(181, 214, 226);
    width:100%;
    height:100%;
    display:block;
    text-decoration: none;
}

.lower-two-pink {
    background:rgb(222, 161, 198);
    width:100%;
    height:100%;
    display:block;
    text-decoration: none;
}
.parent {
    --gap: 16px;
    --num-cols: 4px;
    --row-height: 300px;
   


    box-sizing: border-box;
    padding: var(--gap);

    display: grid;
    grid-template-columns: repeat(var(--num-cols), 1fr);
    grid-auto-rows: var(--row-height);
    gap: var(--gap);
    
}

.parent > img {
    width:100%;
    height:100%;
    object-fit: cover;
}