.singleproject-teaser {
    margin-bottom:60px;
}

.singleproject-teaser a {
    text-decoration: none;
    transition: all .4s ease-in-out;
}

.singleproject-teaser a:hover .projectimage img {
    transform:scale(1.3);
}

.singleproject-teaser a:hover h3 {
    color:var(--primary);
}

.singleproject-teaser img {
    width:100%;
    height:100%;
    object-fit: cover;
    transition: all .4s ease-in-out;
}
.projectimage {
    width: 100%;
    position: relative;
    aspect-ratio: 1 / .8;
    overflow: hidden;
    margin-bottom:20px;
}

.singleproject-teaser .suptitle {
    font-family: "Ubuntu Sans", Arial, sans-serif;
    font-weight: 400;
    font-size: 14px;
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    color:var(--secondary);
}

.singleproject-teaser h3 {
    margin-bottom:25px;
    transition: all .4s ease-in-out;
}

.projectlink {
    font-weight:700;
    transition: all .4s ease-in-out;
    position:relative;
    font-size:14px;
}

.projectlink:after {
    content:"";
    width:0;
    height:4px;
    background:var(--secondary);
    display:block;
    position:absolute;
    bottom:-6px;
    left:0;
    transition:all .4s ease-in-out;
}

.singleproject-teaser a:hover .projectlink {
    color:var(--secondary);
}

.singleproject-teaser a:hover .projectlink:after {
    width:100%;
}

.section-projectteaser .gx-3 {
    --bs-gutter-x: 40px;
}

.project-content {
    padding-right:50px;
}

@media screen and (max-width: 960px) {
    .col-4.singleproject-teaser {
        flex:0 1 100%;
        max-width:100%;
    }
}