* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Bodoni Moda', serif;
    font-size: 1.2rem;
}

.container {
    /* height: 700px; */
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 20px;
    /* background: -webkit-linear-gradient(to right, #521922, #fffdff); */
    background: linear-gradient(to right, #39010b, #f57ef5);
   
}




    .left-text {
        flex-basis: 30%;
        color: white;
    }

    .heading {
        font-size: 2.5rem;
        text-align: center;
        word-spacing: 5px;
    }

    .mantra {
        margin-top: 20px;
        word-spacing: 5px;
    }

    .subheading {
        margin-top: 20px;
        word-spacing: 5px;
        margin-bottom: 10px;
    }

    .gallery {
        flex-basis: 60%;
        display: grid;
        gap: 8px;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 120px;
    }

    .box {
        background-size: cover;
        background-position: top;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgb(76, 38, 48);
        background-blend-mode: hard-light;
        transition: all 1s ease-in-out;
        cursor: pointer;
    }

    .box:hover {
        background-color: #8d8c8c;
        background-position: center;
        box-shadow: 0 0 4px #fff;
    }

    .row-2 {
        grid-row: span 2;
    }

    .col-2 {
        grid-column: span 2;
    }

    /* media query for width <= 1024 */

    @media screen and (max-width: 1024px) {
        .container {

            flex-direction: column;
            padding-block: 20px;
            padding: 25px;
        }

        .gallery {
            padding-inline: 12px;
            width: 100%;
            grid-auto-rows: 250px;
        }

        .box {
            grid-row: span 1;
            grid-column: span 3;
        }
    }