gallery/public/previews/arch/css/pages/Home/_work.scss

.preview {
    position: absolute;
    width: 300px;
    height: 300px;
    overflow: hidden;
    pointer-events: none;
    transform-origin: center;
    transform: scale(0);
    z-index: 2;

    .preview-img {
        width: 100%;
        height: 100%;
        background: url(../../../assests/images/home/projects.png);
        background-size: cover;
        background-position: 0 0;
        pointer-events: none;
    }

    @include breaks (1120px) {
       display: none;
    }
}

.project {
    width: 100%;
    padding: 2.5em 1em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5vw;
    border-bottom: 1px solid $borderColor;
    cursor: pointer;

    @include breaks (870px) {
        flex-direction: column;
        gap: 2.5vw;
     }

    >div {
        width: 100%;
    }

    p {
        font-size: 18px;
        line-height: 100%;
        text-align: center;
        font-family: satoshiM;
    }
}

#header {
    p {
        display: flex;
        flex-direction: column;
        text-align: center;
        color: rgb(187, 187, 187);
        font-family: satoshiM;
    }

    @include breaks (870px) {
        display: none;
     }
}