.hero-variant-2 {
    min-height: var(--hero-v2-min-height);
}

.hero-variant-2 .hero-grid {
    margin-top: var(--hero-v2-grid-margin-top);
    display: grid;
    grid-template-columns: var(--hero-v2-grid-columns);
    gap: var(--hero-v2-grid-gap);
    align-items: center;
    width: 100%;
}

.hero-variant-2 .hero-content {
    text-align: var(--hero-v2-content-align);
}

.hero-variant-2 .hero-image {
    position: relative;
    width: 100%;
    height: var(--hero-v2-image-height);
    border-radius: var(--hero-v2-image-radius);
    overflow: hidden;
    background: var(--hero-image-placeholder-bg);
}

.hero-variant-2 .hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.hero-variant-2 .hero-image-badge {
    position: absolute;
    bottom: var(--hero-v2-image-badge-bottom);
    right: var(--hero-v2-image-badge-right);
    background: var(--hero-image-badge-bg);
    color: var(--hero-v2-image-badge-color);
    padding: var(--hero-v2-image-badge-padding-y) var(--hero-v2-image-badge-padding-x);
    border-radius: var(--hero-v2-image-badge-radius);
    text-align: center;
    box-shadow: var(--hero-v2-image-badge-shadow);
    border: none;
    min-width: var(--hero-v2-image-badge-min-width);
    z-index: var(--hero-v2-image-badge-z);
}

.hero-variant-2 .hero-image-placeholder {
    width: 100%;
    height: 100%;
    background: var(--hero-image-placeholder-bg);
    border-radius: var(--hero-v2-image-radius);
    padding: var(--hero-v2-placeholder-padding-y) var(--hero-v2-placeholder-padding-x);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: var(--hero-v2-placeholder-min-height);
}

.hero-variant-2 .hero-buttons,
.hero-variant-2 .hero-trust {
    justify-content: var(--hero-v2-actions-justify);
}

.hero-variant-2 .hero-image-badge-number {
    color: var(--hero-v2-image-badge-number-color);
}

@media (max-width: 992px) {
    .hero-variant-2 .hero-grid {
        grid-template-columns: 1fr;
        gap: var(--hero-v2-grid-gap-tablet);
        text-align: center;
    }

    .hero-variant-2 .hero-content {
        text-align: center;
    }

    .hero-variant-2 .hero-buttons,
    .hero-variant-2 .hero-trust {
        justify-content: center;
    }

    .hero-variant-2 .hero-image {
        position: relative;
        border-radius: var(--hero-v2-image-radius);
        overflow: hidden;
        aspect-ratio: var(--hero-v2-image-aspect-ratio-tablet);
        height: var(--hero-v2-image-height);
        max-width: var(--hero-v2-image-max-width-tablet);
        margin: 0 auto;
        background: var(--hero-image-placeholder-bg);
    }

    .hero-variant-2 .hero-image-badge {
        bottom: var(--hero-v2-image-badge-bottom-tablet);
        right: var(--hero-v2-image-badge-right-tablet);
        padding: var(--hero-v2-image-badge-padding-y-tablet) var(--hero-v2-image-badge-padding-x-tablet);
    }
}

@media (max-width: 768px) {
    .hero-variant-2 .hero-image {
        height: var(--hero-v2-image-height-mobile);
    }

    .hero-variant-2 .hero-image-badge {
        position: static;
        margin-top: 20px;
        display: inline-block;
        padding: var(--hero-v2-image-badge-padding-y-mobile) var(--hero-v2-image-badge-padding-x-mobile);
    }

    .hero-variant-2 .hero-image-badge-number {
        font-size: var(--hero-v2-image-badge-number-size-mobile);
        font-weight: var(--hero-v2-image-badge-number-weight-mobile);
    }
}