画像を指定の位置に貼り付けたいのですが、imgタグでobject-positionを指定すると、画像が欠けてしまって、悩んでいます。

画像を指定の位置に貼り付けたくて、imgタグのobject-positionを指定したら欠けてしまい、どうしたらいいのか悩んでいます。ほかにいい方法があったら教えていただければ幸いです。よろしくお願いいたします。

この重なっている画像をobject-position:21px 0%;すると、もう一つ下の画像のようになります。

左側の21pxだけかけてしまって・・・
marginをつけてもかけてしまって・・・

html一部

         <section class="works">
            <div class="works-container">
                <h2 class="section-title outfit">works</h2>
                <div id="smarttab" class="tab">
                    <ul class="nav">
                        <li><a class="nav-link" href="#tab-1">デザイン</a></li>
                        <li><a class="nav-link" href="#tab-2">映像</a></li>
                        <li><a class="nav-link" href="#tab-3">その他</a></li>
                    </ul>
                    <div class="tab-content">
                        <div id="tab-1" class="tab-pane flex" role="tabpanel">
                            <div class="works-tab-content-item">
                                <img src="assets/images/works/works_tab_ilist_1_img_1.jpg" alt="株式会社サンプル オフィシャルサイト" class="image1">
                                <h3 class="works-tab-content-title">
                                    <p class="p1">株式会社サンプル</p>
                                    <p class="p2">オフィシャルサイト</p>
                                </h3>
                            </div>
                            <div class="works-tab-content-item">
                                <img class="image2" src="assets/images/works/works_tab_ilist_1_img_2.jpg" alt="サンプルクリニック リーフレット" class="image2">
                                <h3 class="works-tab-content-title">
                                    <p class="p3">サンプルクリニック</p>
                                    <p class="p4">リーフレット</p>
                                </h3>
                            </div>

css

.works {
    background-color: #e7e9fb;
}

.works-container{
    padding-top: 70px;
    padding-bottom: 80px;
    max-width: 1080px;
    height: 1119px;
    margin: auto;
    
}

.works-container h2{
    font-size: 35px;
    font-weight: bold;
    margin-bottom: 30px;
}

.st-theme-basic {
    border: none;
}

.tab.st>.nav {
    column-gap: 0.25rem;
    flex-direction: row !important;
}

.tab.st-theme-basic > .nav {
    box-shadow: none;
}

.tab.st-theme-basic>.nav .nav-link {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    line-height: 1;
    background-color: #d8d8d8;
    color: #000;
    border-radius: 0.937rem 0.937rem 0 0;
}

@media (min-width: 768px) {
    .tab.st-theme-basic>.nav .nav-link {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
        font-size: 1.25rem;
    }
}

.tab.st-theme-basic > .nav .nav-link.active {
    color: #fff !important;
    background-color: #554b9c;
}

.tab.st-theme-basic > .nav .nav-link.active::after {
    background-color: unset !important;
}

.tab-content {
    text-align: center;
    background-color: #fff;
    border-radius: 0 0 1.25rem 1.25rem;
}

.tab.st-theme-basic>.tab-content>.tab-pane {
    flex-direction: column;
    row-gap: 28px;
    padding: 2.5rem 3.5rem 2rem;
}

@media (min-width: 768px) {
    .tab.st-theme-basic>.tab-content>.tab-pane {
        row-gap: 2.25rem;
        justify-content: space-between;
        flex-direction: row;
        padding: 3.75rem 2.25rem;
    }
}

.works-tab-content-item .image1{
    object-fit: none;
    margin-top: -1px;
}

.works-tab-content-title {
    margin-top: 16px;
    font-size: 16px;
}

.works-tab-content-title .p1{
    margin-top: -4px;
    margin-bottom: 5px;
}

.works-tab-content-item .image2{
    object-position: 21px 0%;
    margin-top: -3px;
}

本当は上の画像も縮尺の調整がわからなくて困っている状態ですが、今は欠けてしまう画像をどうにかする方法を知りたいです。

勉強させていただければ、幸いです。