.parent {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      grid-template-rows: repeat(6, 1fr);
      gap: 8px;
      background-color: #dcdcdc;
      color: #443200;
  }

  .div1 {
      grid-column: span 2 / span 2;
      background-color: #dcdcdc;
      color: #443200;
  }

  .div2 {
      grid-column: span 4 / span 4;
      grid-column-start: 3;
      background-color: #dcdcdc;
      color: #443200;
  }

  .div3 {
      grid-column: span 6 / span 6;
      grid-row-start: 2;
      background-color: #dcdcdc;
      color: #443200;
  }

  .div4 {
      grid-column: span 3 / span 3;
      grid-row: span 3 / span 3;
      grid-row-start: 3;
      background-color: #dcdcdc;
      color: #443200;
  }

  .div5 {
      grid-column: span 3 / span 3;
      grid-row: span 3 / span 3;
      grid-column-start: 4;
      grid-row-start: 3;
      background-color: #dcdcdc;
      color: #443200;
  }

  .div6 {
      grid-column: span 6 / span 6;
      grid-row-start: 6;
      background-color: #dcdcdc;
      color: #443200;
  }

  .logo {
      height: 100px;
      width: 100px;
      flex: auto;
  }

  /* Project 1 - CSS Button Showcase */

  button {
      padding: 10px 20px;
      border: none;
      font-size: 18px;
      cursor: pointer;
      margin: 5px;
  }

  .btn-hover:hover {
      background: lightskyblue;
      color: #4E342E;

  }

  .btn-glow {
      background: pink;
      color: black;
      border-radius: 5px;
      transition: box-shadow 0.3s;
  }

  .btn-glow:hover {
      box-shadow: 0 0 100px rgb(255, 75, 105)
  }

  /* Project 2 - Photo Gallery With Hover Effects */

  .gallery {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      justify-content: center;
  }

  .gallery img {
      width: 180px;
      height: 120px;
      object-fit: cover;
      border-radius: 6px;
      transition: all 0.3s ease;
      gap: 15px;
  }

  .hover-one:hover {
      transform: rotate(360deg);
      transform: scale(1.25);
      box-shadow: 0 8px 15px gray;
      opacity: 1;
  }

  .hover-two:hover {
      filter: grayscale(100%);
      transition: filter 0.4, transform 0.3;
      transform: scale(1.25)
  }

  /* Hover 3 - Scale & Fade */

  .hover-three:hover {
      transform: scale(1.25);
      opacity: 0.5;
  }

  /* Project 3 - Style'd Quote Box */

  .quote-section {
      text-align: center;
      max-width: 30%;
  }

  .quote-section h3 {
      color: #4E342E;
      font-family: 'Merriweather', serif;
      margin-bottom: 15px;
      text-transform: uppercase;
      letter-spacing: 1px;
  }

  .quote-box {
      font-family: 'Georgia', serif;
      font-style: italic;
      background-image: linear-gradient(135deg, #d9cbb4, #b7a68f), url('https://www.transparenttextures.com/patterns/black-paper.png');
      background-blend-mode: multiply;
      padding: 20px 30px;
      border-left: 4px solid #4E342E;
      border-radius: 10px;
      box-shadow: 0 4px 10px grey;
      color: #2e2b26;
      transition: transform 0.2s ease, box-shaddow 0.2s ease, background 0.2s ease;
  }

  .quote-box:hover {
      transform: translateY(-4px);
      box-shadow: 0 7px 16px grey;
      background-image: linear-gradient(135deg, #b7a68f, #d9cbb4), url('https://www.transparenttextures.com/patterns/black-paper.png');
  }

  .quote-box cite {
      display: block;
      margin-top: 12px;
      font-style: normal;
      font-weight: bold;
      color: #00420D;
      text-align: right;
      letter-spacing: 0.5px;
  }