.dapps-single-dapp {
    position: relative;

    display: flex;
    flex-direction: row;

    border-radius: 8px;
    background: radial-gradient(3327.9% 19350.94% at 55.79% 50%, #F1F1F1 0%, #F0F0F0 100%);
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.04) inset;

    transition: 0.3s background-color, 0.3s background-image;
}

.starknet-ui-dark .dapps-single-dapp {
    background: radial-gradient(3327.9% 19350.94% at 55.79% 50%, #222127 0%, #1E1B26 100%);
    box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.15) inset;
}

.dapps-single-dapp .dapps-single-dapp_back {
    background: url("") center center no-repeat, #CAA7F7;
    box-shadow: 0px 0px 12px 0px rgba(157, 177, 247, 0.25), 0px 1px 2px 0px rgba(92, 118, 210, 0.35);
}

.starknet-ui-dark .dapps-single-dapp .dapps-single-dapp_back {
    background: url("") center center no-repeat, #3C156F;
    background-size: cover;
    box-shadow: 0px 0px 12px 0px rgba(138, 120, 247, 0.25), 0px 1px 2px 0px rgba(138, 120, 247, 0.35);
}

.dapps-single-dapp_front,
.dapps-single-dapp_back {
    border-radius: 8px;
}

.dapps-single-dapp_front {
    position: relative;

    height: 100%;
    width: 100%;

    display: flex;
    flex-direction: column;
    padding: 24px;

    border: 1px solid var(--border-divider, #EFEFEF);
    z-index: 2;

    flex-shrink: 0;
}

.starknet-ui-dark .dapps-single-dapp_front {
    border: 1px solid var(--border-divider, #313131);
}

.dapps-single-dapp:focus .dapps-single-dapp_front,
.dapps-single-dapp:focus-within .dapps-single-dapp_front,
.dapps-single-dapp:hover .dapps-single-dapp_front {
    /*position: absolute;*/
    /*top: 0; left: 0;*/

    opacity: 0;
    pointer-events: none;
}

.dapps-single-dapp_front small,
.dapps-single-dapp_front ul li {
    display: inline-block;
    padding: 0 12px;

    font-size: 14px;
    font-weight: 600;
    line-height: 21px;

    border-radius: 100px;
}

.dapps-single-dapp_front ul li {
    color: var(--text-secondary);
    text-transform: capitalize;
    background-color: var(--surface-card-d);
}

.dapps-single-dapp_front small {
    position: absolute;
    top: 16px; right: 16px;

    padding: 0 8px;

    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.04em;

    color: var(--text-primary-inverted);
    text-transform: uppercase;
    background-color: var(--surface-accent);
}

.dapps-single-dapp_front small[data-is-live="true"] {
    color: var(--text-secondary, #6B7280);
    background: var(--surface-hover, #FBFBFB);
}

.dapps-single-dapp_front small[data-is-live="false"] {
    color: var(--text-button-ghost, #6B7280);
    background: var(--surface-button-fill-disabled, #E9E8EA);
}

.starknet-ui-dark .dapps-single-dapp_front small[data-is-live="true"] {
    background: var(--text-secondary, #CCCCCC);
    background: var(--surface-chip-hover, #363636);
}

.starknet-ui-dark .dapps-single-dapp_front small[data-is-live="false"] {
    color: var(--text-button-ghost, #CCCCCC);
    background: var(--surface-chip-default, #1B1B1B);
}

.dapps-single-dapp.is-slim .dapps-single-dapp_front figure {
    margin: 0;
}

.dapps-single-dapp_front figure {
    width: 48px;
    height: 48px;

    margin: 0 0 12px;
}

.dapps-single-dapp_front figure img {
    width: 100%;
    height: 100%;

    border-radius: 50%;
    object-fit: cover;

    vertical-align: middle;
}

.dapps-single-dapp_front h3,
.starknet-post-inner .dapps-single-dapp_front h3 {
    width: 100%;
    margin: 0 0 8px;

    font-size: 18px;
    font-weight: 600;
    line-height: 25.2px;
    text-align: left;
    color: var(--text-primary);
}

.dapps-single-dapp p {
    width: 100%;
    display: -webkit-box;

    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    text-align: left;

    overflow: hidden;
    text-overflow: ellipsis;
}

.dapps-single-dapp .dapps-single-dapp_front p {
    margin: 0 0 20px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    align-self: flex-start;

    color: var(--text-secondary);
}

.dapps-single-dapp_front ul {
    width: 100%;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    gap: 8px;
    margin-top: auto;
}

.dapps-single-dapp_back {
    height: 100%;
    width: 100%;

    /*position: absolute;*/
    /*top: 0; right: 0; bottom: 0; left: 0;*/

    display: flex;
    flex-direction: column;

    padding: 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: 0.8s opacity cubic-bezier(0.45, 1.45, 0.8, 1),
    0.8s background cubic-bezier(0.45, 1.45, 0.8, 1);
    z-index: 3;

    flex-shrink: 0;
    cursor: pointer;
}

.dapps-single-dapp.is-slim .dapps-single-dapp_back {
    cursor: default;
}

.dapps-single-dapp:hover .dapps-single-dapp_back,
.dapps-single-dapp:focus .dapps-single-dapp_back,
.dapps-single-dapp:focus-within .dapps-single-dapp_back {
    position: relative;
    margin-left: -100%;

    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.dapps-single-dapp_back p {
    display: block;
    margin: 0 0 24px;
    color: #fff;
}

.dapps-single-dapp_back ul:not(.dapps-single-dapp_back__tags) {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin-top: auto;
}

.dapps-single-dapp_back ul li img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

.dapps-single-dapp_front figure span {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);

    border-radius: 50%;
    background: linear-gradient(119deg, #EC796B -25.87%, #D672EF 125.87%);
}