

    body{
        background-color: #faf7f7;
    }
    .parent {
        display: grid;
        grid-template-columns: 3fr 2fr 1fr 1fr 3fr;
        grid-template-rows: 2fr 3fr 2fr 3fr 3fr 3fr;
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        height: 2000px;
        width: 90%;
        margin: auto;
        min-width: 1000px;
        }
        
        .div1 { 
            grid-area: 1 / 1 / 4 / 2; 
            border: solid #482C68 25px;
            z-index: 3;
        }

        #palmgradient{
            grid-area: 1 / 1 / 4 / 2; 
            background-image: linear-gradient(to bottom right, #482c6862,rgba(236, 230, 189, 0.417));
            z-index: 4;
        }

        .div2 { 
            grid-area: 1 / 2 / 2 / 5; 
            background-color: #482C68;
            color: #F2E5C4;
            font-family: Taviraj;
            font-weight: 600;
            font-size: 34px;
            display: grid;
            align-content: center;
            justify-content: center;
            text-align: center;
            padding-right: 25px;
        }

        .div3 { 
            grid-area: 1 / 5 / 2 / 6; 
            background-color: #F6EDED;
            display: grid;
            align-content: center;
            justify-content: center; 
        }

        .div4 { 
            grid-area: 2 / 2 / 3 / 6; 
            background-color: #7E3333;
            font-family: Lexend Giga;
            font-weight: 800;
            font-size: 100px;
            color: #F6EDED;
            align-content: center;
            justify-content: center;
            text-align: center;
            padding-bottom: 50px;
            line-height: 90px;
            text-transform: uppercase;
        }
        .div4 span{
            font-family: Lexend Giga;
            font-weight: 800;
            font-size: 48px;
            color: #F6EDED;
        }

        .div5 { 
            grid-area: 3 / 2 / 4 / 3; 
            background-color: #F6EDED;
            display: grid;
            align-content: center;
            justify-content: center; 
        }

        .div6 { 
            grid-area: 3 / 3 / 5 / 6; 
            background-image: url(../assets/figmaimages/jesusoncross.jpg);
            background-size: cover;
            background-position: center;
            border: solid #7E3333 46px;
        }

        .div7 {
             grid-area: 4 / 1 / 6 / 3; 
             background-color: #F2E5C4;
             font-family: Taviraj;
             font-weight: 600;
             font-size: 46px;
             color: #7E3333;
             display: grid;
             align-content: center;
             justify-content: center;
             text-align: center;
             padding-left: 75px;
             padding-right: 75px;
             padding-top: 100px;
             padding-bottom: 100px;
        }

        .div8 {
             grid-area: 5 / 3 / 6 / 5; 
             background-color: #F6EDED;
             display: grid;
             align-content: center;
             justify-content: center; 
        }

        .div9 { 
            grid-area: 5 / 5 / 6 / 6; 
        }

        #flowergradient{
            grid-area: 5 / 5 / 6 / 6;  
            background-image: linear-gradient(to bottom right,rgb(236, 230, 189), #4f663c32);
            z-index: 4;
        }

        .div10 { 
            grid-area: 6 / 1 / 7 / 4; 
            border: solid #4F663C 22px;
        }

       #biblegradient{
            grid-area: 6 / 1 / 7 / 4; 
            background-image: linear-gradient(to bottom left,rgba(236, 230, 189, 0.502), #4f663c32);
            z-index: 4;
       }
        
        .div11 { 
            grid-area: 6 / 4 / 7 / 6; 
            background-color: #4F663C;
            font-family: Lexend Giga;
            font-weight: 300;
            font-size: 20px;
            text-transform: uppercase;
            color: #F2E5C4;
            display: grid;
            align-content: center;
            justify-content: center;
            text-align: center;
            padding-left: 53px;
            padding-right: 75px;
        }
        
        .fill{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }