.work-area-s24 .works-wrapper {
    display: grid;
    gap: 0 30px;
    grid-template-columns: repeat(2, 1fr);
    position: relative
}

@media only screen and (max-width: 1199px) {
    .work-area-s24 .works-wrapper {
        gap:30px 30px
    }
}

@media(max-width: 575px) {
    .work-area-s24 .works-wrapper {
        grid-template-columns:repeat(1, 1fr);
        gap: 40px 30px
    }
}

.work-area-s24 .works-wrapper>*:nth-child(2) {
    max-width: 360px;
    margin-inline:auto}

@media only screen and (max-width: 991px) {
    .work-area-s24 .works-wrapper>*:nth-child(2) {
        max-width:250px
    }
}

@media only screen and (max-width: 767px) {
    .work-area-s24 .works-wrapper>*:nth-child(2) {
        max-width:190px
    }
}

@media(max-width: 575px) {
    .work-area-s24 .works-wrapper>*:nth-child(2) {
        max-width:100%
    }
}

.work-area-s24 .works-wrapper>*:nth-child(3) {
    max-width: 360px;
    margin-inline:auto;align-self: center
}

@media only screen and (max-width: 991px) {
    .work-area-s24 .works-wrapper>*:nth-child(3) {
        max-width:250px
    }
}

@media only screen and (max-width: 767px) {
    .work-area-s24 .works-wrapper>*:nth-child(3) {
        max-width:190px
    }
}

@media(max-width: 575px) {
    .work-area-s24 .works-wrapper>*:nth-child(3) {
        max-width:100%
    }
}

.work-area-s24 .works-wrapper-box {
    position: relative
}

.work-area-s24 .works-wrapper-box .shape-1 {
    position: absolute;
    top: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 190px
}

@media only screen and (max-width: 1399px) {
    .work-area-s24 .works-wrapper-box .shape-1 {
        width:150px
    }
}

@media only screen and (max-width: 1199px) {
    .work-area-s24 .works-wrapper-box .shape-1 {
        display:none
    }
}

.work-area-s24 .work-box:hover .thumb img {
    transform: scale(1.1)
}

.work-area-s24 .work-box .thumb {
    overflow: hidden
}

.work-area-s24 .work-box .thumb img {
    transition: all .5s
}

.work-area-s24 .work-box .title {
    font-size: 24px;
    line-height: 1
}

@media only screen and (max-width: 991px) {
    .work-area-s24 .work-box .title {
        font-size:20px
    }
}

@media only screen and (max-width: 767px) {
    .work-area-s24 .work-box .title {
        font-size:18px
    }
}

.work-area-s24 .work-box .title br {
    display: block
}

.work-area-s24 .work-box .content {
    margin-top: 28px
}

@media only screen and (max-width: 991px) {
    .work-area-s24 .work-box .content {
        margin-top:22px
    }
}

.work-area-s24 .work-box .tag {
    font-size: 14px;
    text-transform: uppercase;
    margin-top: 13px;
    display: inline-block
}

.work-area-s24 .work-box.large {
    position: relative
}

.work-area-s24 .work-box.large:hover .content {
    opacity: 1;
    visibility: visible;
    bottom: 78px
}

.work-area-s24 .work-box.large .content {
    position: absolute;
    inset-inline-start: 60px;
    bottom: 48px;
    opacity: 0;
    visibility: hidden;
    transition: all .5s
}

@media only screen and (max-width: 1199px) {
    .work-area-s24 .work-box.large .content {
        position:static;
        opacity: 1;
        visibility: visible
    }
}

.work-area-s24 .work-box.large .title {
    font-size: 30px;
    color: var(--white)
}

@media only screen and (max-width: 1199px) {
    .work-area-s24 .work-box.large .title {
        font-size:24px;
        color: var(--primary)
    }
}

@media only screen and (max-width: 991px) {
    .work-area-s24 .work-box.large .title {
        font-size:20px
    }
}

@media only screen and (max-width: 767px) {
    .work-area-s24 .work-box.large .title {
        font-size:18px
    }
}

.work-area-s24 .work-box.large .tag {
    color: var(--white);
    margin-top: 10px
}

@media only screen and (max-width: 1199px) {
    .work-area-s24 .work-box.large .tag {
        margin-top:13px;
        color: var(--secondary)
    }
}