.tax-credit-header {
    text-align: center; /* Equivalent to text-center */
    margin-bottom: 0rem;
}

.tax-credit-tag {
    display: inline-block; /* Equivalent to inline-block */
    background-color: #F26C4F; /* Equivalent to bg-[#F26C4F] */
    color: #fff; /* Equivalent to text-white */
    padding: 0.5rem 1.5rem; /* Equivalent to px-6 py-2 (2 * 0.25rem = 0.5rem, 6 * 0.25rem = 1.5rem) */
    border-radius: 9999px; /* Equivalent to rounded-full */
    font-size: 0.875rem; /* Equivalent to text-sm */
    font-weight: 600; /* Equivalent to font-semibold */
    margin-bottom: 2rem; /* Equivalent to mb-8 (8 * 0.25rem = 2rem) */
}

.tax-credit-tag-text {
    /* No specific styles needed here, it inherits from .tax-credit-tag */
}

/* --- Tax Offers Grid --- */
.tax-offers-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* Equivalent to grid-cols-1 */
    gap: 1.5rem; /* Equivalent to gap-6 (6 * 0.25rem = 1.5rem) */
}

@media (min-width: 768px) { /* md breakpoint */
    .tax-offers-grid {
        grid-template-columns: repeat(2, 1fr); /* Equivalent to md:grid-cols-2 */
    }
}

@media (min-width: 1024px) { /* lg breakpoint */
    .tax-offers-grid {
        grid-template-columns: repeat(3, 1fr); /* Equivalent to lg:grid-cols-3 */
    }
}

/* --- Individual Tax Offer Card --- */
.tax-offer-card {
    background-color: #fff; /* Common card background */
    border-radius: 0.5rem; /* Common card border-radius */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* Common card shadow */
    transition: box-shadow 0.3s ease-in-out; /* Equivalent to transition-shadow */
    border: 1px solid var(--gray-200);
    /* Card padding will be applied by .tax-offer-card-header and .tax-offer-card-content */
}

    .tax-offer-card:hover {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); /* Equivalent to hover:shadow-lg */
    }

/* --- Card Header --- */
.tax-offer-card-header {
    padding: 1.5rem;
    padding-bottom: 1rem; /* Equivalent to pb-4 */
    text-align: center; /* Center content like image wrapper */
}

.tax-offer-image-wrapper {
    width: 70%; /* Equivalent to w-[70%] */
    margin-left: auto; /* Equivalent to mx-auto */
    margin-right: auto; /* Equivalent to mx-auto */
}

.tax-offer-image-aspect {
    position: relative;
    padding-bottom: calc(4 / 3 * 100%); /* Ratio 3/4 (height / width = 4/3, so padding-bottom is (4/3)*100%) */
    margin-bottom: 1rem; /* Equivalent to mb-4 */
}

.tax-offer-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Equivalent to object-cover */
    border-radius: 0.5rem; /* Equivalent to rounded-lg */
}

.tax-offer-title {
    font-size: 1.125rem; /* Equivalent to text-lg */
    font-weight: 700; /* Equivalent to font-bold */
    line-height: 1.375; /* Equivalent to leading-tight */
    color: #1a202c; /* Common dark gray text */
}

/* --- Card Content --- */
.tax-offer-card-content {
    padding: 0; /* Equivalent to CardContent p-0 */
    padding-left: 1.5rem; /* Assuming p-6 from parent Card is applied here */
    padding-right: 1.5rem;
    padding-bottom: 1.5rem;
}

.tax-offer-button {
    width: 100%; /* Equivalent to w-full */
    background-color: #0097E0; /* Equivalent to bg-[#0097E0] */
    color: #fff; /* Common white text */
    padding: 0.75rem 1rem; /* px-4 py-2 (adjust to match py-3 from Button component) */
    border-radius: 0.375rem; /* Common button border-radius */
    font-weight: 500; /* Common button font-weight */
    font-size: 1rem; /* Common button font-size */
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out; /* For hover effect */
    display: inline-block;
    text-align: center;
}

    .tax-offer-button:hover {
        background-color: #0077B3; /* Equivalent to hover:bg-[#0077B3] */
    }