@use '../../utils' as *;

/*----------------------------------------*/
/* About styles
/*----------------------------------------*/

.about-thumb-box {
    margin-top: 80px;
    text-align: center;
    position: relative;

    .td-btn {
        &::before {
            position: absolute;
            content: "";
            inset: 0;
            @include border-radius(8px);
            padding: 2px;
            background: linear-gradient(90deg, rgba(91, 252, 196, 0.2) 0%, rgba(245, 147, 228, 0.2) 50%, rgba(113, 164, 240, 0.2) 100%);
            -webkit-mask: linear-gradient(var(--td-white) 0 0) content-box, linear-gradient(var(--td-white) 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            z-index: -1;
        }
    }

    .tag {
        position: absolute;
        top: -18px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
    }
}

.about-thumb {
    position: relative;
    width: 100%;
    border-radius: 16px;
    background: linear-gradient(127.27deg, rgba(81, 255, 194, 1) 0%, rgba(164, 202, 214, 1) 23.920483887195587%, rgba(255, 143, 236, 1) 50%, rgba(69, 72, 255, 1) 100%);
    padding: 1px;

    &::before {
        position: absolute;
        content: "";
        height: 100%;
        width: 100%;
        border-radius: 16px;
        top: 0;
        left: 0;
        background: linear-gradient(190deg, rgba(81, 255, 194, 1) 0%, rgba(164, 202, 214, 1) 23.920483887195587%, rgba(255, 143, 236, 1) 50%, rgba(69, 72, 255, 1) 100%);
        opacity: 0.1;
    }

    .image {
        width: 100%;
        border-radius: 16px;
    }
}