---

.granite-types {
     text-align: center;
     margin: 80px 0;
 }

 .granite-types h2 {
     font-size: 36px;
     font-weight: 700;
     color: #1e1e1e;
     border-bottom: 4px solid #d4af37;
     display: inline-block;
     padding-bottom: 12px;
     margin-bottom: 50px;
     letter-spacing: 1px;
 }

 /* Сетка: 2 столбца */
 .granite-types .grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 100px;
     max-width: 1000px;
     margin: 0 auto;
 }

 /* Карточка: горизонтальное расположение (фото слева, текст справа) */
 .granite-types .type {
     background: #fff;
     border-radius: 24px;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     display: flex;
     align-items: center;
     gap: 20px;
     padding: 20px;
     text-align: left;
 }

 .granite-types .type:hover {
     transform: translateY(-4px);
     box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
 }

 /* Круглое фото */
 .granite-types .type img {
     width: 200px;
     height: 200px;
     border-radius: 50%;
     object-fit: cover;
     flex-shrink: 0;

     transition: transform 0.3s ease;
 }

 .granite-types .type:hover img {
     transform: scale(1.05);
 }

 /* Блок с текстом справа */
 .granite-types .type .type-content {
     flex: 1;
 }

 .granite-types .type h3 {
     font-size: 18px;
     font-weight: 700;
     color: #2c2c2c;
     margin-bottom: 8px;
     letter-spacing: 0.5px;
 }

 .granite-types .type p {
     font-size: 13px;
     color: #666;
     line-height: 1.4;
     margin-bottom: 12px;
     padding: 0;
 }

 /* Ссылка "Подробнее" */
 .granite-types .type a {
     display: inline-block;
     text-decoration: none;
     font-size: 13px;
     font-weight: 600;
     color: #d4af37;
     transition: all 0.2s;
     padding-bottom: 2px;
 }

 .granite-types .type a:hover {
     color: #bd9d2c;
     border-bottom: 2px solid #bd9d2c;
 }
 <section id="granite-types" class="granite-types container">
    <h2>Виды гранита</h2>
    <div class="grid">
        <div class="type">
            <img src="гр1.webp" alt="Санарский гранит">
            <div class="type-content">
                <h3>САНАРСКИЙ</h3>
                <p>Гранит Нижне-Санарского месторождения соответствует применяют для производства</p>
                <a href="#">Подробнее</a>
            </div>
        </div>
        <div class="type">
            <img src="гр2.jpg" alt="Капустинский гранит">
            <div class="type-content">
                <h3>КАПУСТИНСКИЙ</h3>
                <p>Гранит Капустинского месторождения является самым популярным сортом красного</p>
                <a href="#">Подробнее</a>
            </div>
        </div>
        <div class="type">
            <img src="гр3.webp" alt="Цветок Урала">
            <div class="type-content">
                <h3>ЦВЕТОК УРАЛА</h3>
                <p>Гранит Нижне-Санарского месторождения соответствует применяют для производства</p>
                <a href="#">Подробнее</a>
            </div>
        </div>
</div>
</section>