yintai-company-home/src/pages/Social/Sustainability.module.css

.socialResponsibilityCaseDataContent {
    margin-top: -3.125rem;
    margin-bottom: 6.25rem;
}

.socialResponsibilityCaseDataItems {
    /* 2列布局 gap-30 每行交替变化，如：
    [810*480 | 560*480]
    [560*480 | 810*480]
    使用 flex + nth-child 分配宽窄比例
    */
    display: flex;
    flex-wrap: wrap;
    gap: 1.875rem;
}

.socialResponsibilityCaseDataItem {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    position: relative;
    overflow: hidden;

    .mask {
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.1);
    }

    &:hover {
        .socialResponsibilityCaseDataItemContentInner {
            top: 0;
            background: rgba(20, 53, 92, 0.9);
            justify-content: flex-start;
            transition-delay: 0s;

            .socialResponsibilityCaseDataItemTitle {
                left: 3.125rem;
                transform: translateX(0);
                transition-delay: 0s;
            }
        }

        .socialResponsibilityCaseDataItemContent {
            opacity: 1;
            transition: opacity 0.3s ease 0.3s;
        }
    }

    .socialResponsibilityCaseDataItemContentInner {
        padding: 3.125rem;
        width: 100%;
        height: 100%;
        background: transparent;
        transition: all 0.3s ease;
        transition-delay: 0.2s;
        position: absolute;
        top: 75%;

        .socialResponsibilityCaseDataItemMore {
            display: inline-block;
            margin-top: 3.75rem;
            width: 6.5rem;
            height: 2.375rem;
            border-radius: 0rem 0rem 0rem 0rem;
            border: .0625rem solid #FFFFFF;

            font-weight: 400;
            font-size: 1rem;
            color: #FFFFFF;
            line-height: 1.375rem;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    .socialResponsibilityCaseDataItemTitle {
        font-weight: 500;
        font-size: 1.5rem;
        color: #FFFFFF;
        line-height: 2.125rem;
        font-style: normal;
        text-transform: none;
        transition: all 0.3s ease;
        transition-delay: 0.2s;
        transform: translateX(50%);
    }

    .socialResponsibilityCaseDataItemContent {
        margin-top: 1.25rem;
        font-weight: 400;
        font-size: 1.125rem;
        color: #FFFFFF;
        line-height: 2.125rem;
        text-align: justify;
        font-style: normal;
        text-transform: none;
        opacity: 0;
        transition: opacity 0.2s ease 0s;
    }



}

/* 奇数行 [宽|窄]: 4n+1 宽, 4n+2 窄 */
/* 偶数行 [窄|宽]: 4n+3 窄, 4n+4 宽 */
/* 810+560=1370，每行总宽 = 100% - 1.875rem */
.socialResponsibilityCaseDataItem:nth-child(4n + 1),
.socialResponsibilityCaseDataItem:nth-child(4n + 4) {
    flex-basis: calc((100% - 1.875rem) * 810 / 1370);
    aspect-ratio: 810 / 480;
}

.socialResponsibilityCaseDataItem:nth-child(4n + 2),
.socialResponsibilityCaseDataItem:nth-child(4n + 3) {
    flex-basis: calc((100% - 1.875rem) * 560 / 1370);
    aspect-ratio: 560 / 480;
}


.socialResponsibilityReportData {
    /* 4列 */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.0625rem;

    .socialResponsibilityReportItem {
        /* width: 20.3125rem; */

        .socialResponsibilityReportItemCover {
            /* width: 20.3125rem; */
            /* height: 27.4375rem; */
            aspect-ratio: 325 / 439;
            box-shadow: 0rem 0rem 1.25rem 0rem rgba(0, 16, 32, 0.2);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            cursor: pointer;
        }

        .socialResponsibilityReportItemTitle {
            font-weight: 500;
            font-size: 1.125rem;
            color: #222222;
            line-height: 1.625rem;
            text-align: center;
            font-style: normal;
            text-transform: none;
            margin-top: 2.5rem;
        }
    }


}

.socialResponsibilityReportItemMore {
    width: 6.5rem;
    height: 2.375rem;
    line-height: 2.375rem;
    text-align: center;
    border: .0625rem solid #333333;
    font-size: 1rem;
    color: #333333;
    cursor: pointer;
    margin: 0 auto;
    margin-top: 6.25rem;

    &:hover {
        background: #14355C;
        color: #fff;
    }
}