/* ==========================================================================
   HIZMETLERIMIZ SLIDER - YENİDEN YAZILDI
   ========================================================================== */

.mepa-hizmetler-section {
    background: #f8f9fa;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.mepa-hizmetler-title {
    font-family: 'Poppins', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #1a1a1a;
    text-align: center;
    margin: 0 0 40px;
}

/* Listelemeli Hizmet görünümü */
.mepa-hizmetler-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

/* Slider Wrapper - FULL WIDTH */
.mepa-hizmetler-slider-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 60px;
}

/* Custom Slider */
.mepa-custom-slider {
    overflow: hidden;
    cursor: grab;
    user-select: none;
    /* Kart gölgelerinin alt kenarda kesilmesi için güvenli alan bırak. */
    padding-bottom: 18px;
}

.mepa-custom-slider:active {
    cursor: grabbing;
}

.mepa-slider-track {
    display: flex;
    gap: 20px;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.mepa-slider-track.dragging {
    transition: none;
}

/* Az sayıda hizmet olduğunda kart grubunu geniş ekranda ortala. */
@media (min-width: 1200px) {
    .mepa-hizmet-count-2 .mepa-slider-track,
    .mepa-hizmet-count-3 .mepa-slider-track {
        justify-content: center;
    }

    .mepa-hizmet-count-2 .mepa-hizmet-nav,
    .mepa-hizmet-count-3 .mepa-hizmet-nav {
        display: none;
    }
}

/* Slide Item - Desktopta dört kart aynı anda görünür. */
.mepa-slide {
    flex: 0 0 calc((100% - 60px) / 4);
    min-width: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.mepa-slide:hover {
    transform: translateY(-5px);
}

/* Navigation Arrows */
.mepa-hizmet-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 46px;
    height: 46px;
    background: #fff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #333;
    transition: all 0.3s ease;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}

.mepa-hizmet-nav:hover:not(:disabled) {
    background: var(--mepa-primary-color, #00a8e2);
    color: #fff;
    transform: translateY(-50%) scale(1.05);
}

.mepa-hizmet-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.mepa-hizmet-prev {
    left: 5px;
}

.mepa-hizmet-next {
    right: 5px;
}

/* Hizmet Card */
.mepa-hizmet-card {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    background: #fff;
    border-radius: 0;
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    margin: 0 auto;
}

.mepa-hizmet-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

/* Görsel Alanı */
.mepa-hizmet-card-image {
    width: 100%;
    aspect-ratio: 478 / 285;
    height: auto;
    overflow: hidden;
}

.mepa-hizmet-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.mepa-hizmet-card:hover .mepa-hizmet-card-image img {
    transform: scale(1.05);
}

.mepa-hizmet-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e0e0e0 0%, #f5f5f5 100%);
}

/* Başlık Alanı */
.mepa-hizmet-card-content {
    min-height: 86px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 20px;
    text-align: center;
}

.mepa-hizmet-card-title {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
    line-height: 1.4;
}

/* Button */
.mepa-hizmetler-btn {
    display: inline-block;
    padding: 14px 35px;
    background: var(--mepa-primary-color, #00a8e2);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 30px;
    transition: all 0.3s ease;
    text-transform: none;
    letter-spacing: 0.5px;
}

.mepa-hizmetler-btn:hover {
    filter: brightness(90%);
    color: #fff;
    transform: translateY(-2px);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 992px) {
    .mepa-hizmetler-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mepa-hizmetler-grid .mepa-hizmet-card {
        max-width: none;
    }

    .mepa-hizmetler-slider-wrapper {
        padding: 0 50px;
    }
    
    .mepa-slide {
        flex: 0 0 350px;
        min-width: 350px;
    }
    
    .mepa-hizmet-card {
        max-width: 350px;
        height: auto;
    }
    
    .mepa-hizmet-card-image {
        height: 220px;
    }
    
    .mepa-hizmet-card-content {
        height: 80px;
    }
}

@media (max-width: 768px) {
    .mepa-hizmetler-section {
        padding: 60px 0;
    }
    
    .mepa-hizmetler-title {
        font-size: 26px;
        margin-bottom: 30px;
    }
    
    .mepa-hizmetler-slider-wrapper {
        padding: 0 45px;
    }
    
    .mepa-slide {
        flex: 0 0 300px;
        min-width: 300px;
    }
    
    .mepa-hizmet-card {
        max-width: 300px;
    }
    
    .mepa-hizmet-nav {
        width: 38px;
        height: 38px;
    }
    
    .mepa-hizmet-card-image {
        height: 200px;
    }
}

@media (max-width: 576px) {
    .mepa-hizmetler-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .mepa-hizmetler-section {
        padding: 50px 0;
    }
    
    .mepa-hizmetler-slider-wrapper {
        padding: 0 40px;
    }
    
    .mepa-slide {
        flex: 0 0 calc(100vw - 100px);
        min-width: calc(100vw - 100px);
    }
    
    .mepa-slider-track {
        gap: 15px;
    }
    
    .mepa-hizmet-nav {
        width: 34px;
        height: 34px;
    }
    
    .mepa-hizmet-nav svg {
        width: 18px;
        height: 18px;
    }
    
    .mepa-hizmet-card {
        max-width: 100%;
    }
    
    .mepa-hizmet-card-image {
        height: 220px;
    }
    
    .mepa-hizmet-card-content {
        height: 70px;
    }
    
    .mepa-hizmet-card-title {
        font-size: 14px;
    }
    
    .mepa-hizmetler-btn {
        padding: 12px 25px;
        font-size: 12px;
    }
}

/* ==========================================================================
   BENTO HIZMETLER
   ========================================================================== */
.mepa-hizmetler-bento {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
    gap: 10px;
    min-height: 400px;
}

.mepa-bento-featured,
.mepa-bento-side-card {
    color: #1a1a1a;
    text-decoration: none;
    overflow: hidden;
    border-radius: 10px;
}

.mepa-bento-featured {
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: center;
    padding: 36px 12%;
}

.mepa-bento-featured .mepa-bento-image {
    position: absolute;
    inset: 0;
}

.mepa-bento-image {
    overflow: hidden;
    background: #ececec;
}

.mepa-bento-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.mepa-bento-featured:hover .mepa-bento-image img,
.mepa-bento-side-card:hover .mepa-bento-image img {
    transform: scale(1.06);
}

.mepa-bento-featured-content {
    position: relative;
    z-index: 1;
    width: min(240px, 100%);
    padding: 26px 24px;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.mepa-bento-side-list {
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 10px;
    min-height: 0;
}

.mepa-bento-side-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(120px, 52%);
    min-height: 0;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
}

.mepa-bento-side-content {
    padding: 18px 14px 14px 20px;
    background: #fff;
}

.mepa-bento-side-card .mepa-bento-image {
    min-height: 160px;
}

.mepa-bento-icon {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    border-radius: 50%;
    background: #fff;
    color: var(--mepa-primary-color, #00a8e2);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    font-size: 17px;
}

.mepa-bento-title {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
    line-height: 1.4;
}

.mepa-bento-line {
    display: block;
    width: 25px;
    height: 2px;
    margin: 10px 0;
    background: var(--mepa-primary-color, #00a8e2);
}

.mepa-bento-featured-content p,
.mepa-bento-side-content p {
    margin: 0;
    color: #5f6368;
    font-size: 12px;
    line-height: 1.65;
}

.mepa-bento-detail {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 16px;
    padding: 9px 14px;
    border-radius: 22px;
    background: var(--mepa-primary-color, #00a8e2);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.mepa-bento-arrow {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: var(--mepa-primary-color, #00a8e2);
    font-size: 12px;
    transition: transform 0.25s ease;
}

.mepa-bento-side-card:hover .mepa-bento-arrow {
    transform: translateX(3px);
}

@media (max-width: 991px) {
    .mepa-hizmetler-bento {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .mepa-bento-featured {
        min-height: 360px;
        padding: 35px 10%;
    }

    .mepa-bento-side-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
    }
}

@media (max-width: 640px) {
    .mepa-bento-featured {
        min-height: 390px;
        padding: 25px;
        align-items: flex-end;
    }

    .mepa-bento-featured-content {
        padding: 24px 20px;
    }

    .mepa-bento-side-list {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   MADDELI HIZMETLER
   ========================================================================== */
.mepa-hizmetler-items-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.mepa-hizmet-item-card {
    display: block;
    min-height: 210px;
    padding: 28px;
    border-radius: 12px;
    background: #fff;
    color: #1a1a1a;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.mepa-hizmet-item-card:hover {
    background: var(--mepa-primary-color, #00a8e2);
    color: #fff;
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.mepa-hizmet-item-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: 50%;
    background: var(--mepa-primary-color, #00a8e2);
    color: #fff;
    font-size: 18px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.mepa-hizmet-item-card:hover .mepa-hizmet-item-icon {
    background: #fff;
    color: var(--mepa-primary-color, #00a8e2);
}

.mepa-hizmet-item-title {
    margin: 0 0 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.mepa-hizmet-item-card p {
    margin: 0;
    color: #5f6368;
    font-size: 13px;
    line-height: 1.65;
    transition: color 0.3s ease;
}

.mepa-hizmet-item-card:hover .mepa-hizmet-item-title,
.mepa-hizmet-item-card:hover p {
    color: #fff;
}

@media (max-width: 991px) {
    .mepa-hizmetler-items-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .mepa-hizmetler-items-grid {
        grid-template-columns: 1fr;
    }

    .mepa-hizmet-item-card {
        min-height: 0;
        padding: 24px;
    }
}

/* ==========================================================================
   DIKEY KART HIZMETLER
   ========================================================================== */
.mepa-hizmetler-vertical-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 8px;
}

.mepa-hizmet-vertical-card {
    position: relative;
    display: block;
    min-height: 320px;
    overflow: hidden;
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
    background: #1a1a1a;
}

.mepa-hizmet-vertical-image {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.mepa-hizmet-vertical-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.mepa-hizmet-vertical-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 25%, rgba(0, 0, 0, 0.76) 100%);
    transition: background-color 0.3s ease;
}

.mepa-hizmet-vertical-card:hover .mepa-hizmet-vertical-image img {
    transform: scale(1.08);
}

.mepa-hizmet-vertical-card:hover .mepa-hizmet-vertical-overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0.62) 100%);
}

.mepa-hizmet-vertical-card h3 {
    position: absolute;
    right: 18px;
    bottom: 16px;
    left: 18px;
    z-index: 1;
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
}

.mepa-hizmet-vertical-arrow {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 1;
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 11px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.mepa-hizmet-vertical-card:hover .mepa-hizmet-vertical-arrow {
    background: var(--mepa-primary-color, #00a8e2);
    transform: translate(2px, -2px);
}

@media (max-width: 640px) {
    .mepa-hizmetler-vertical-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mepa-hizmet-vertical-card {
        min-height: 250px;
    }
}

/* ==========================================================================
   ABSTRACT GORSEL HIZMETLER
   ========================================================================== */
.mepa-hizmetler-horizontal-wrap {
    width: 100%;
}

.mepa-hizmetler-horizontal-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px 0;
}

.mepa-hizmet-horizontal-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #000;
    text-align: center;
    text-decoration: none;
}

.mepa-hizmet-horizontal-image {
    width: 100%;
    height: 270px;
    margin-bottom: 15px;
    overflow: hidden;
}

.mepa-hizmet-horizontal-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.mepa-hizmet-horizontal-card:hover .mepa-hizmet-horizontal-image img {
    transform: scale(1.05);
}

.mepa-hizmet-horizontal-card h3 {
    margin: 0;
    color: #000;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

@media (max-width: 1400px) {
    .mepa-hizmetler-horizontal-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1200px) {
    .mepa-hizmetler-horizontal-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .mepa-hizmetler-horizontal-wrap {
        padding: 0 20px;
    }

    .mepa-hizmetler-horizontal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 25px 15px;
    }

    .mepa-hizmet-horizontal-image {
        height: 220px;
    }
}

@media (max-width: 480px) {
    .mepa-hizmet-horizontal-grid {
        grid-template-columns: 1fr;
    }
}

.mepa-hizmetler-abstract-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.mepa-abstract-clip-defs {
    position: absolute;
    overflow: hidden;
    pointer-events: none;
}

.mepa-hizmet-abstract-card {
    position: relative;
    display: block;
    flex: 0 0 calc((100% - 80px) / 5);
    height: auto;
    min-height: 0;
    aspect-ratio: 0.72 / 1;
    overflow: visible;
    border-radius: 11px;
    color: #fff;
    text-decoration: none;
    background: transparent;
}

.mepa-hizmet-abstract-image {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 0;
    -webkit-clip-path: url(#mepa-abstract-card-shape);
    clip-path: url(#mepa-abstract-card-shape);
}

.mepa-hizmet-abstract-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: none;
    transition: transform 0.45s ease;
}

.mepa-hizmet-abstract-overlay {
    position: absolute;
    inset: 0;
    border-radius: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.62) 100%);
    -webkit-clip-path: url(#mepa-abstract-card-shape);
    clip-path: url(#mepa-abstract-card-shape);
}

/* Proje bölümü kendi SVG kimliğini kullanır; Hizmetler bölümüyle çakışmaz. */
.mepa-projects-abstract-grid .mepa-hizmet-abstract-image,
.mepa-projects-abstract-grid .mepa-hizmet-abstract-overlay {
    -webkit-clip-path: url(#mepa-project-abstract-card-shape);
    clip-path: url(#mepa-project-abstract-card-shape);
}

.mepa-hizmet-abstract-card::after {
    display: none;
}

.mepa-hizmet-abstract-card:hover .mepa-hizmet-abstract-image img {
    transform: scale(1.08);
}

.mepa-hizmet-abstract-card h3 {
    position: absolute;
    right: 45px;
    bottom: 12px;
    left: 10px;
    z-index: 2;
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
}

.mepa-hizmet-abstract-arrow {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--mepa-primary-color, #00a8e2);
    color: #fff;
    font-size: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    transition: transform 0.3s ease, filter 0.3s ease;
}

.mepa-hizmet-abstract-card:hover .mepa-hizmet-abstract-arrow {
    transform: translate(2px, -2px);
}


@media (max-width: 640px) {
    .mepa-hizmetler-abstract-grid {
        gap: 22px 14px;
    }

    .mepa-hizmet-abstract-card {
        flex-basis: calc((100% - 14px) / 2);
    }
}

/* Tamamlanan Projeler için seçilebilir görünüm modelleri */
.mepa-project-design { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.mepa-project-design-card { display: block; overflow: hidden; color: #1a1a1a; text-decoration: none; }
.mepa-project-design-image { overflow: hidden; background: #eee; }
.mepa-project-design-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.mepa-project-design-card:hover .mepa-project-design-image img { transform: scale(1.05); }
.mepa-project-design-content h3 { margin: 0; font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 600; line-height: 1.4; }
.mepa-project-design-content p { margin: 8px 0 0; color: #646970; font-size: 13px; line-height: 1.6; }
.mepa-project-design-icon { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; margin-bottom: 14px; border-radius: 50%; background: var(--mepa-primary-color, #00a8e2); color: #fff; }

.mepa-project-design--list .mepa-project-design-image { height: 220px; }
.mepa-project-design--list .mepa-project-design-content { padding: 16px; text-align: center; }
.mepa-project-design--list .mepa-project-design-content p, .mepa-project-design--list .mepa-project-design-icon { display: none; }

.mepa-project-design--slider { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.mepa-project-design--slider .mepa-project-design-card { flex: 0 0 300px; scroll-snap-align: start; }
.mepa-project-design--slider .mepa-project-design-image { height: 210px; }
.mepa-project-design--slider .mepa-project-design-content { padding: 16px; text-align: center; }
.mepa-project-design--slider .mepa-project-design-icon, .mepa-project-design--slider .mepa-project-design-content p { display: none; }

.mepa-project-design--items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mepa-project-design--items .mepa-project-design-card { min-height: 210px; padding: 28px; background: #fff; box-shadow: 0 4px 18px rgba(0,0,0,.06); transition: background-color .3s ease, transform .3s ease; }
.mepa-project-design--items .mepa-project-design-image { display: none; }
.mepa-project-design--items .mepa-project-design-card:hover { background: var(--mepa-primary-color, #00a8e2); color: #fff; transform: translateY(-4px); }
.mepa-project-design--items .mepa-project-design-card:hover .mepa-project-design-icon { background: #fff; color: var(--mepa-primary-color, #00a8e2); }
.mepa-project-design--items .mepa-project-design-card:hover p { color: #fff; }

.mepa-project-design--vertical, .mepa-project-design--abstract { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.mepa-project-design--vertical .mepa-project-design-card, .mepa-project-design--abstract .mepa-project-design-card { position: relative; min-height: 300px; border-radius: 10px; background: #1a1a1a; }
.mepa-project-design--vertical .mepa-project-design-image, .mepa-project-design--abstract .mepa-project-design-image { position: absolute; inset: 0; }
.mepa-project-design--vertical .mepa-project-design-content, .mepa-project-design--abstract .mepa-project-design-content { position: absolute; right: 16px; bottom: 16px; left: 16px; z-index: 1; color: #fff; }
.mepa-project-design--vertical .mepa-project-design-content h3, .mepa-project-design--abstract .mepa-project-design-content h3 { color: #fff; }
.mepa-project-design--vertical .mepa-project-design-content p, .mepa-project-design--abstract .mepa-project-design-content p, .mepa-project-design--vertical .mepa-project-design-icon, .mepa-project-design--abstract .mepa-project-design-icon { display: none; }
.mepa-project-design--vertical .mepa-project-design-card::after, .mepa-project-design--abstract .mepa-project-design-card::after { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.72) 100%); content: ''; }
.mepa-project-design--abstract .mepa-project-design-image img { filter: grayscale(1); }

.mepa-project-design--bento { grid-template-columns: minmax(0, 2fr) minmax(250px, 1fr); grid-template-rows: repeat(2, minmax(190px, 1fr)); }
.mepa-project-design--bento .mepa-project-design-card:first-child { position: relative; grid-row: span 2; }
.mepa-project-design--bento .mepa-project-design-card:first-child .mepa-project-design-image { height: 100%; }
.mepa-project-design--bento .mepa-project-design-card:not(:first-child) { display: grid; grid-template-columns: 1fr 1fr; background: #fff; }
.mepa-project-design--bento .mepa-project-design-card:not(:first-child) .mepa-project-design-image { order: 2; height: 100%; }
.mepa-project-design--bento .mepa-project-design-content { padding: 20px; }
.mepa-project-design--bento .mepa-project-design-card:first-child .mepa-project-design-content { position: absolute; bottom: 28px; left: 28px; max-width: 240px; padding: 24px; background: rgba(255,255,255,.94); }

@media (max-width: 900px) {
    .mepa-project-design, .mepa-project-design--items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mepa-project-design--bento { grid-template-columns: 1fr; grid-template-rows: auto; }
    .mepa-project-design--bento .mepa-project-design-card:first-child { min-height: 380px; grid-row: auto; }
}
@media (max-width: 560px) { .mepa-project-design, .mepa-project-design--items { grid-template-columns: 1fr; } }