.home-promise {
    background-color: var(--color-secondary-1);

    >.container {
        padding-top: 80px;
        padding-bottom: 140px;

        >h2 {
            text-align: center;
            color: var(--color-primary-2);
            margin-bottom: 24px;
        }

        >h3 {
            position: relative;
            z-index: 1;
            text-align: center;
            width: fit-content;
            margin: 0 auto 60px;

            &::before {
                content: "";
                position: absolute;
                z-index: -1;
                top: -37px;
                left: -27px;
                display: block;
                width: 60px;
                aspect-ratio: 1;
                border-radius: 50%;
                background-color: var(--color-primary-3);
            }
        }

        >div {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0 24px;
            padding-top: 60px;
        }
    }
}

.home-promise-card {
    grid-row: span 2;
    display: grid;
    grid-template-rows: subgrid;
    background-color: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.10);

    &:nth-child(odd) {
        position: relative;
        top: -60px;
    }

    >h3 {
        padding: 32px 24px;
    }
}

@media screen and (width < 1024px) {
    .home-promise > .container > div {
        gap: 0 12px;
    }
    .home-promise-card {
        >h3 {
            padding: 16px;
        }
    }
}
@media screen and (width < 768px) {
    .home-promise > .container > div {
        padding-top: 30px;
    }
    .home-promise-card:nth-child(odd) {
        top: -30px;
    }
}
@media screen and (width < 576px) {
    .home-promise > .container{
        padding-top: 60px;
        padding-bottom: 60px;
        >h3 {
            margin: 0 auto 40px;
            &::before {
                top: -48px;
                left: 0;
            }
        }
        > div {
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            padding-top: 0px;
        }
    }
    .home-promise-card:nth-child(odd) {
        top: 0px;
    }
}