/* Section Header */
.gallery .section-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 24px;
 flex-wrap: wrap;
 gap: 12px;
}

.gallery .section-header-title {
 font-size: 28px;
 font-weight: 700;
 color: #0f1035;
}

.gallery .section-see-all {
 font-size: 16px;
 color: #0f1035;
 text-decoration: none;
 font-weight: 500;
}

/* Card Item */
.gallery .card-item {
 position: relative;
 border-radius: 16px;
 overflow: hidden;
 height: 240px;
 cursor: pointer;
 transition: transform 0.2s ease-in-out;
}

.gallery .card-item::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: rgba(0, 0, 0, 0.2);
 pointer-events: none;
 border-radius: 16px;
 transition: background-color 0.3s ease;
}

.gallery .card-item:hover {
 transform: scale(1.02);
}

.gallery .card-item img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
}

.gallery .card-title {
 position: absolute;
 bottom: 12px;
 left: 16px;
 color: #fff;
 font-size: 16px;
 font-weight: 600;
 text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Tablet (768px) */
@media (max-width: 768px) {
 .gallery .section-header-title {
   font-size: 24px;
 }

 .gallery .section-see-all {
   font-size: 14px;
 }

 .gallery .card-title {
   font-size: 14px;
 }

 .gallery .card-item {
   height: 200px;
 }
}

/* Mobile (480px) */
@media (max-width: 480px) {
 .gallery .section-header {
   flex-direction: column;
   align-items: flex-start;
 }

 .gallery .section-header-title {
   font-size: 20px;
 }

 .gallery .section-see-all {
   font-size: 14px;
 }

 .gallery .card-title {
   font-size: 13px;
 }

 .gallery .card-item {
   height: 180px;
 }
}