/* fonts */

.bitter-<uniquifier> {
    font-family: "Bitter", serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
  }

  
.cormorant-<uniquifier> {
    font-family: "Cormorant", serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
  }

  /*font styling*/

  h1 {
    font-family: "Bitter", serif;
    font-optical-sizing:none;
   font-weight: 480;
    font-style: normal;
    font-size: 60px;
  }

  h2 {
    font-family: "Cormorant", serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: italic;
    font-size: 50px;
    letter-spacing: 10px;
  }

  h3 {
        font-family: "Bitter", serif;
        font-optical-sizing: auto;
        font-weight: 500;
        font-style: normal;
  }

/*image styling*/

.parent {
    display: grid;
    width: 90%;
    margin: auto;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(9, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    height: 100%;

   
    }
    
    .parent > div {
        border: solid rgb(182, 201, 218) 1px;
        
    }
    .div1 { grid-area: 1 / 6 / 3 / 7; }
    .div2 { grid-area: 1 / 4 / 3 / 6; }
    .div3 { grid-area: 2 / 1 / 6 / 4; }
    .div4 { grid-area: 8 / 2 / 10 / 4; }
    .div5 { grid-area: 6 / 1 / 8 / 4; }
    .div6 { grid-area: 8 / 1 / 10 / 2; }
    .div7 { grid-area: 5 / 4 / 9 / 7; }
    .div8 { grid-area: 3 / 4 / 5 / 7; }
    .div9 { grid-area: 1 / 2 / 2 / 4; }
    .div10 { grid-area: 1 / 1 / 2 / 2; }
    .div11 { grid-area: 9 / 4 / 10 / 6; }
    .div12 { grid-area: 9 / 6 / 10 / 7; }


    .fill {
        width: 100%;           
        height: 100%;           
        object-fit: cover;
    }

    /*text styling*/

    .text1 {
        position: absolute;
       bottom: 60%;
        left: 10%;
    
        color: white;
        text-align: left;
        
      }

      .text2 {
        position: absolute;
        bottom: 40%;
        left: 10%;
        color: white;
      }

      .text3 {
        position: absolute;
        bottom: 5%;
        left: 62%;
        color: white;
      }

      .text4 {
        position: absolute;
        bottom: 1%;
        left: 62%;
        color: white;
      }