@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.feature-section {
    padding: 0 80px 80px 80px;
}

.feature-row-gap {
    gap: 24px;
}

.card-stack-gap {
    gap: 24px;
}

.feature-grid-gap {
    margin: 0;
    gap: 24px;
}

.feature-grid-gap .col-auto {
    padding: 0;
}

.product-img-container {
    width: 473.78px;
    height: 512px;
    animation: fadeIn 3s ease-in-out;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    cursor: default;
}

.product-img-container:hover {
    transform: scale(1.02) translateY(-8px);
}

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

.feature-card-item {
    width: 248px;
    height: 244px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 16px;
    box-sizing: border-box;
    animation: fadeIn 3s ease-in-out;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.feature-card-item:hover {
    transform: translateY(-12px) scale(1.03);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.card-content-wrapper {
    text-align: right;
    color: #FFFFFF;
    z-index: 2;
}

.card-navy { background-color: #184382; }
.card-yellow { background-color: #F9D122; }

.card-yellow .card-content-wrapper {
    color: #184382 !important;
}

.card-yellow .card-title, 
.card-yellow .card-subtitle {
    color: #184382 !important;
}


@media (min-width: 768px) and (max-width: 1024px) {
    .feature-section {
        padding: 48px 24px 80px !important;
    }

    .feature-section .col-auto {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    .product-img-container {
        width: 530.991px !important;
        height: 173.509px !important;
    }

    .card-stack-gap {
        width: auto !important;
        display: grid !important;
        grid-template-columns: repeat(2, 253px) !important;
        gap: 24px !important;
        justify-content: center !important;
    }

    .feature-grid-gap {
        display: contents !important;
    }

    .feature-card-item {
        width: 253px !important;
        height: 244px !important;
        padding: var(--space-16) !important;
        gap: 10px !important;
    }

    .feature-section .col-auto {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}


@media (max-width: 767px) {
    .feature-section {
        display: flex !important;
        padding: 24px var(--space-16) !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: var(--space-48) !important;
        align-self: stretch !important;
    }

    .feature-section .container-fluid {
        padding: 0 !important;
    }

    .feature-section .feature-row-gap {
        flex-direction: column !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    .feature-section .feature-row-gap > .col-auto {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 !important;
    }

    .product-img-container {
        width: 100% !important;
        height: 173.509px !important;
        align-self: stretch !important;
        margin: 0 0 16px 0 !important;
    }

    .product-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .card-stack-gap {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        max-width: 100% !important;
        gap: var(--space-16) !important;
        width: 100% !important;
        margin: 0 !important;
    }


    .feature-grid-gap {
        display: contents !important;
    }

    .feature-card-item {
        width: 100% !important;
        max-width: 100% !important;
        height: 165px !important;
        padding: var(--space-16) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        align-items: flex-end !important;
        box-sizing: border-box !important;
        background-size: 100% 100% !important;
        margin: 0 !important;
    }

    .card-content-wrapper {
        text-align: right !important;
        width: 100% !important;
    }
}