#banner {
    height: 500px;
    background: url('../images/projects/banner.jpg') no-repeat center;
}

#list {
    margin: 70px 0;
}

#list ul {
    font-size: 0;
    margin-left: -20px;
    margin-top: -20px;
}

#list li {
    display: inline-block;
    vertical-align: top;
    width: calc(33.33333333333333% - 40px);
    margin-left: 20px;
    margin-top: 20px;
}

#list a {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    height: 100%;
    padding: 30px;
}

#list img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    -webkit-object-fit: cover;
    -o-object-fit: cover;
    -moz-object-fit: cover;
    -ms-object-fit: cover;
}

#list p {
    font-family: 'Acumin Variable Concept';
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
    line-height: 22px;
    text-align: center;
}

#list li:hover p,
#list li:active p,
#list li:focus p {
    color: #fff;
}

#list .title {
    font-size: 22px;
    margin-top: 30px;
    color: #2B3D4B;
    letter-spacing: 1.5px;
}

#list .content {
    font-size: 14px;
    margin-top: 28px;
    color: #656565;
    letter-spacing: 1px;
}

@media screen and (max-width: 576px) {
    #banner {
        height: 98px;
        background-size: 100%;
        background-position-y: top;
    }
    #list {
        margin: 30px 0;
    }
    #list ul {
        margin-top: 0;
        margin-left: 0;
    }
    #list li {
        width: 100%;
        margin-left: 0;
    }
    #list img {
        height: auto;
    }
}