.container {
    width: auto;
    height: 100%;
    // background: radial-gradient(ellipse at bottom, #1c2837 0%, #050608 100%);
    // background-attachment: fixed;
}


.outerWrapper {
    opacity: 1;
    // animation: zoomIn 1.2s ease forwards;
    width: 100%;
    height: 100%;
}

.loader {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 50vh;
}

.itemWrapper {
    flex: 1 0 auto;
    max-width: 50%;
    width: 30rem;
    order: 0;
    padding: 0 1rem;
}

.content {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0 auto;
    justify-content: space-between;
    padding: 0px;
    box-sizing: border-box;

    & h2 {
        width: 100%;
        margin: 10px 0 2.4rem;
        box-sizing: border-box;
        font-size: 2.8rem;
        font-weight: 400;
        text-transform: uppercase;
        color: #19171c;
        position: relative;

        & .text {
            color: #6441a4;
            font-size: 14px;
            padding: 0 0 2px 4px;
        }

        & .more {
            font-size: 12px;
            position: absolute;
            right: 1rem;
            bottom: 0;
            cursor: pointer;
            color:#6441a4;

            &:hover {
                color: #000;
            }
        }
    }
}

.chipSec {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;

    & span {
        font-size: 1.2rem;
        display: block;
        border-radius: 1.5rem;
        font-weight: 400;
        background: #e6e6e6;
        color: #6d6d6d;
        padding: .1rem 1rem;
        margin: 0 .5rem .5rem 0;
        cursor: pointer;
        transition: all .4s;

        &.active, &:hover {
            background:#19171c;
            color:#fff;
        }
    }
}

@keyframes zoomIn {
    from {opacity: 0; transform: scale(1.01); filter: grayscale(1); }
    to {opacity: 1; transform: scale(1);  filter: grayscale(0);}
}