.mosaic {
      display: grid;
      grid-template-columns: repeat(4, 1fr); /* Masaüstü için 4 kolon */
      gap: 0px;
      width: 100%;
      position: relative;
      min-height: 400px;
    }

    .tile {
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      overflow: hidden;
    }

    /* 1. Kolon (Dikey) */
    .tile.vertical {
      height: 400px;
      grid-row: span 2; /* 2 satır */
    }

    /* 2. Kolon (Yatay Üst Üste) */
    .tile.horizontal {
      height: 200px;
    }

    /* Üzerine Overlay */
    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5); /* Yarı saydam siyah overlay */
      color: white;
      z-index: 10;
      padding: 150px 0 120px 0;
    }

    /* Mobil cihazlar için 2 kolon düzeni ve 3. ve 4. kolonları gizleme */
    @media (max-width: 768px) {
      .mosaic {
        grid-template-columns: repeat(2, 1fr); /* 2 kolon */
        min-height: 250px;
      }

      .tile.vertical {
        height: 300px; /* Dikey resimlerin boyutunu biraz küçültüyoruz */
      }

      .tile.horizontal {
        height: 150px; /* Yatay resimlerin boyutunu biraz küçültüyoruz */
      }

      /* Overlay metnini biraz daha küçültüyoruz ve konumunu ayarlıyoruz */
      .overlay {
        padding: 80px 0;
      }

      .overlay .text-white {
        font-size: 18px; /* Başlık için font boyutunu ayarlıyoruz */
      }

      .overlay h2 {
        font-size: 32px; /* Başlık boyutunu küçük ekranlarda ayarlıyoruz */
      }

      /* 3. ve 4. kolonları gizliyoruz */
      .mosaic .tile:nth-child(4),
      .mosaic .tile:nth-child(5),
      .mosaic .tile:nth-child(6) {
        display: none; /* 3. ve 4. kolonlardaki resimler gizleniyor */
      }
    }

    /* Küçük ekranlar (telefon) için daha fazla düzenleme */
    @media (max-width: 480px) {
      .tile.vertical {
        height: 250px; /* Daha küçük ekranlarda dikey resimlerin boyutunu küçültüyoruz */
      }

      .tile.horizontal {
        height: 125px; /* Yatay resimlerin boyutunu da küçültüyoruz */
      }

      .overlay .text-white {
        font-size: 16px; /* Başlık için font boyutunu daha da küçültüyoruz */
      }

      .overlay h2 {
        font-size: 28px; /* Küçük ekranlarda başlık boyutunu daha da küçültüyoruz */
      }
    }