.portfolio-thumbnail{
    display: flex;
    aspect-ratio:16/6;
    border-radius:10px;
    position: relative;
    overflow: hidden;
    box-shadow:2px 10px 20px rgba(0,0,0,.1);
    transition:all 300ms ease;
    margin-bottom:30px;
}
.portfolio-thumbnail img{
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    height:100%;
    width:100%;
    object-fit:cover;
    object-position:0 0;
    transition:all 6000ms ease;
}
.portfolio-thumbnail:hover img{
    object-position: 0 100%;
}
.portfolio-box{
    display:grid;
    grid-template-columns:1fr 3fr;
    gap:var(--gap, 40px);
    margin-bottom:40px;
}
.portfolio-box.info{
    padding-bottom:30px;
    border-bottom:2px solid #f0f0f0;
    margin-top:60px;
}
.portfolio-box:last-child{
    margin-bottom:0;
}
.portfolio-box > h4{
    font-size: clamp(1.5rem, 1.25rem + 0.8333vw, 1.875rem);
}
.portfolio-box__info{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    list-style:none;
    margin:0;
    padding:0;
}
.portfolio-box__info > li{
    display: flex;
    flex-direction:column;
    gap:10px;
}
.portfolio-box__info > li > b{
    font-weight:800;
}
.portfolio-box__info > li a{
    color:var(--text-color);
}
.portfolio-gallery{
    margin-bottom:40px;
}
#gallery{
    padding:40px 30px;
    margin:-40px -30px;
}
#gallery figure{
    box-shadow:0 10px 20px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    border-radius:10px;
    display: flex;
    aspect-ratio:1200/1305;
}
#gallery figure::after{
    content:'';
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:var(--color-1);
    mix-blend-mode: multiply;
    z-index:2;
    pointer-events:none;
    opacity:0;
    transition: all 300ms ease;
}
#gallery figure:hover::after{
    opacity:.75;
}
#gallery figure img{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    width:100%;
    object-fit:cover;
    transition: all 300ms ease;
}
#gallery figure:hover img{
    transform:scale(1.1);
}
#services{
    background-color:#f9f9f9;
}
#services .section-title{
    margin-bottom:30px;
}
#services :is(.section-title, .section-suptitle){
    display: flex;
    justify-content:center;
    text-align: center;
}
#services-slider{
    padding:40px 30px;
    margin:-40px -30px;
}

@media screen and (max-width:767px){
    #services :is(.section-title, .section-suptitle){
        justify-content:flex-start;
        text-align:left;
    }
    .portfolio-box{
        display: flex;
        flex-direction:column;
    }
}
@media screen and (max-width:480px){
    .portfolio-box__info{
        grid-template-columns:repeat(2,1fr);
    }
}