section#about {
    position: relative;
    padding: 96px 0;
    background: linear-gradient(180deg, var(--panel), #000000);
}

section#about::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(900px 260px at 10% 10%, rgba(0, 0, 0, 0), transparent 60%),
        radial-gradient(900px 260px at 90% 100%, rgba(0, 0, 0, 0), transparent 60%);
}

.about-wrap { 
    position: relative; 
    z-index: 1; 
}

.about-mosaic {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(5, auto);
    gap: 20px;
    margin-top: 40px;
}

.mosaic-item {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0), 0 0 0 1px rgba(31,228,208,.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mosaic-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0), 0 0 0 1px rgba(0, 0, 0, 0);
}

.mosaic-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.mosaic-item:hover img {
    transform: scale(1.05); 
}

.mosaic-content {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%);
    color: white;
}

.mosaic-content h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.mosaic-content p {
    color: var(--muted);
    font-size: 0.95rem;
}

.mosaic-text {
    background: linear-gradient(180deg, #12181d, #0f1418);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 6px 18px rgba(0,0,0,.45);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    color: #e8f1f2;
}

.mosaic-text-inner {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.mosaic-text h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem;
    color: var(--teal);
    font-weight: 600;
    margin-bottom: 15px;
}

.mosaic-text p {
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.7;
}

.mosaic-main { grid-column: 1 / 7; grid-row: 1 / 3; height: 450px; }

.mosaic-side-text { grid-column: 7 / 13; grid-row: 1 / 3; height: 450px; }

.mosaic-text-1 { grid-column: 1 / 5; grid-row: 3 / 4; }
.mosaic-text-2 { grid-column: 9 / 13; grid-row: 4 / 5; }

.mosaic-text-1a, .mosaic-text-1b, .mosaic-text-2a, .mosaic-text-2b { flex: 1; }

.mosaic-item-1 { grid-column: 5 / 9; grid-row: 3 / 4; height: 450px; }
.mosaic-item-2 { grid-column: 9 / 13; grid-row: 3 / 4; height: 450px; }
.mosaic-item-3 { grid-column: 1 / 5; grid-row: 4 / 5; height: 450px; }
.mosaic-item-4 { grid-column: 5 / 9; grid-row: 4 / 5; height: 450px; }

.about-stats-mosaic {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 40px;
    padding: 30px;
    background: linear-gradient(180deg, #12181d, #0f1418);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0);
}

.stat-item-mosaic { 
    text-align: center; 
    padding: 20px; 
    margin-bottom: 5%;
}

.stat-number-mosaic {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--teal-2);
    display: block;
    margin-bottom: 8px;
}

.stat-label-mosaic { 
    color: var(--muted); 
    font-size: 0.9rem; 
}

@media (max-width: 1024px) {

  section#about {
    padding: 80px 0;
  }

  .about-mosaic {
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
  }

  .mosaic-main {
    grid-column: 1 / 7;
    height: 350px;
  }

  .mosaic-side-text {
    grid-column: 1 / 7;
    height: auto;
  }

  .mosaic-item-1,
  .mosaic-item-2,
  .mosaic-item-3,
  .mosaic-item-4 {
    grid-column: span 3;
    height: 300px;
  }

  .mosaic-text-1,
  .mosaic-text-2 {
    grid-column: span 6;
  }

  .about-stats-mosaic {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media (max-width: 768px) {

  section#about {
    padding: 60px 0;
  }

  .about-mosaic {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 16px;
  }

  .about-mosaic > * {
    grid-column: auto !important;
    grid-row: auto !important;
    height: auto !important;
  }

  .mosaic-main {
    height: 260px !important;
  }

  .mosaic-text {
    padding: 20px;
  }

  .mosaic-text h3 {
    font-size: 1.35rem;
  }

  .mosaic-text p {
    font-size: 0.95rem;
  }

  .about-stats-mosaic {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-number-mosaic {
    font-size: 1.8rem;
  }

}

@media (max-width: 480px) {

  .about-mosaic {
    grid-template-columns: 1fr;
  }

  .mosaic-main {
    height: 240px;
  }

  .mosaic-text {
    padding: 16px;
  }

  .mosaic-text h3 {
    font-size: 1.2rem;
  }

  .mosaic-text p {
    font-size: 0.95rem;
  }

  .about-stats-mosaic {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-number-mosaic {
    font-size: 1.6rem;
  }

}