.hero-graphics {
    margin-bottom: -22px
}

.preview-card {
    height: 100%;
    transition: 0.2s;
}

.preview-card.coming-soon{
    cursor: not-allowed;
}

.preview-card.coming-soon img{
    opacity: 0.3;
}

.preview-card img {
    border: 1px solid #ddd;
    margin-bottom: 1rem;
    opacity: 1;
    transition: 0.2s
}

.preview-card:hover {
    transform: translateY(-.5rem);
}

.preview-card:hover img {
    box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.1);
}

.feature-card {
    display: flex;
    align-items: center;
    padding: 1rem
}

.feature-card h5 {
    margin-bottom: 0
}

.feature-card .icon {
    font-size: 3rem;
    width: 3rem;
    height: 3rem;
    line-height: 1;
    margin-right: 1rem;
    color: #0d6bff
}

.feature-card .icon img {
    width: 2.7rem;
    filter: invert(34%) sepia(69%) saturate(5691%) hue-rotate(213deg) brightness(103%) contrast(101%)
}

.callout-section {
    margin: 120px auto
}

@media (max-width:767.98px) {
    .callout-section {
        margin: 80px auto
    }
}

.social {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
    margin-bottom: 0;
    padding: 0;
    list-style: none
}

.social a {
    font-size: 1.5rem;
    background: #232341;
    color: #0d6bff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50rem;
    width: 50px;
    height: 50px;
    margin: 0 .5rem
}

.social img {
    width: 1.5rem;
    height: 1.5rem;
    filter: invert(34%) sepia(69%) saturate(5691%) hue-rotate(213deg) brightness(103%) contrast(101%);
    transition: 0.2s ease-in-out
}

.social a:hover {
    color: #ff4f7b;
    background: #343463
}

.social a:hover img {
    color: #ff4f7b;
    filter: invert(61%) sepia(45%) saturate(7024%) hue-rotate(316deg) brightness(101%) contrast(102%)
}