.card {
    border-radius: 10px;
    box-shadow: 1px 1px 10px -2px rgba(0, 0, 0, 0.75);
}

.marble-card-list {
    width: 100%;
}

.marble-card-brick-list-entry {
    float: left;
    margin-bottom: 30px;
    padding: 20px;
    text-align: center;
    width: 20%;
}

.marble-card-list-card {
    cursor: pointer;
    float: left;
    margin-bottom: 30px;
    text-align: center;
    width: 20%;
}

.marble-card-list-card img {
    width: 80%
}

.marble-card-list-card-title {
    position: relative;
}

.marble-card-list-card-title-network img {
    float: right;
    height: 20px;
    position: absolute;
    right: 20px;
    top: 10px;
    width: initial !important;
}

@media screen and (max-width: 767px) {
    .marble-card-list-card {
        width: 50%;
    }

    .header-bar-logo img {
        height: 60%;
        margin-top: 1rem;
    }
}


/**
 ============================================= */

/* id search */
.brick-id-3 {
    background: #f1f5f8;
    padding: 3rem 0;;
}


/** card blend effect
 ============================================= */

.marble-card-list-card-container {
    display: inline-block;
    position: relative;
    width: calc(100% - 40px);

    will-change: transform;

    transition: transform 100ms ease;
    transition-property: transform;

    transform-style: preserve-3d;
    transform-origin: 50% 50%;
}

.marble-card-list-card-container img {
    float: left;
    width: 100% !important;
}

.marble-card-list-card-container:after {
    content: '';
    animation: holoAnimation 15s ease infinite;
    transition: none;

    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 300% 300%;
    mix-blend-mode: color-dodge;

    left: 0;
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 11;
    opacity: 0.5;

    background-image: linear-gradient(
            115deg,
            transparent 0%,
            transparent 25%,
            rgb(100, 100, 100) 45%,
            rgb(255, 255, 231) 55%,
            transparent 70%,
            transparent 100%
    );
}

@keyframes holoAnimation {
    3% {
        opacity: 0;
    }
    5% {
        background-position: 0 0;
    }
    7% {
        opacity: 0.3;
    }
    19% {
        background-position: 100% 100%;
    }
    20% {
        opacity: 0;
    }
    50% {
        opacity: 0;
        background-position: 100% 100%;
    }
    55% {
        opacity: 0.25;
    }
    70% {
        opacity: 0;
        background-position: 0 0;
    }
}