/* Brand layer for the home dashboard hero card.
   Keeps dashboard data unchanged and replaces the generic community icon with the Mustotal mark. */

.home-panel-page .home-command-hero,
.home-panel-page .home-command-panel {
    background: #090909;
    background-color: #090909;
    background-image: none;
    border-radius: var(--radius-lg);
}

.home-panel-page .home-command-hero {
    grid-template-columns: minmax(0, 1fr) minmax(9rem, auto) minmax(9rem, auto);
    overflow: hidden;
    padding-right: 0;
    position: relative;
}

.home-panel-page .home-command-hero-icon {
    align-items: center;
    background: transparent;
    border-radius: 0;
    color: transparent;
    display: inline-flex;
    height: 7.2rem;
    justify-content: center;
    margin-right: 0;
    opacity: .10;
    pointer-events: none;
    position: absolute;
    right: var(--spacing-24);
    top: 50%;
    transform: translateY(-50%);
    width: 7.2rem;
    z-index: 0;
}

.home-panel-page .home-command-hero-icon::after {
    background: url("/img/logo-mustotal.webp") right center / contain no-repeat;
    content: "";
    display: block;
    height: 100%;
    width: 100%;
}

.home-panel-page .home-command-hero-icon i {
    display: none;
}

.home-panel-page .home-command-hero-main,
.home-panel-page .home-command-hero-stat {
    position: relative;
    z-index: 1;
}

@media (max-width: 767.98px) {
    .home-panel-page {
        margin-inline: calc(-1 * var(--spacing-8));
        padding-inline: 0 !important;
        width: calc(100% + (var(--spacing-8) * 2));
    }

    .home-panel-page .home-command-hero {
        grid-template-columns: 1fr;
        padding: var(--spacing-20);
    }

    .home-panel-page .home-command-hero-icon {
        height: 7.2rem;
        opacity: .10;
        right: var(--spacing-20);
        top: 50%;
        transform: translateY(-50%);
        width: 7.2rem;
    }

    .home-panel-page .home-command-hero-main {
        padding-right: 6.5rem;
    }

    .home-panel-page .home-command-hero-stat {
        border-top: 0;
    }
}

@media (max-width: 374.98px) {
    .home-panel-page {
        margin-inline: calc(-1 * var(--spacing-4));
        width: calc(100% + (var(--spacing-4) * 2));
    }
}