.product-feature {
    display: grid;
    gap: 24px;
}
.product-feature__description {
    grid-area: text;
}
.product-feature__description > *:first-child {
    margin-top: 0;
}
.product-feature__description > *:last-child {
    margin-bottom: 0;
}
.product-feature__image {
    grid-area: img;
}
.product-feature__image > *,
.product-feature__image img {
    display: block;
    max-width: 100%;
}

.product-feature--default {
    grid-template-columns: minmax(auto, 461px) minmax(auto, 655px);
    grid-template-areas: "text img";
    align-items: center;
}
.product-feature--reverse {
    grid-template-columns: minmax(auto, 655px) minmax(auto, 461px);
    grid-template-areas: "img text";
}
.product-feature--default .product-feature__image > *,
.product-feature--default .product-feature__image img {
    margin-left: auto;
}
.product-feature--reverse .product-feature__image > *,
.product-feature--reverse .product-feature__image img {
    margin-left: 0;
}
@media (max-width: 1024px) {
    .product-feature--default,
    .product-feature--reverse {
        grid-template-columns: 100%;
        grid-template-areas:
            "img"
            "text";
    }
    .product-feature__image > *,
    .product-feature__image img {
        margin: 0 auto !important;
    }
}

.product-feature--card {
    grid-template-columns: repeat(var(--columns), 1fr);
    --columns: 1;
}
.cards--2 {
    --columns: 2;
}
.cards--3 {
    --columns: 3;
}
@media (max-width: 1024px) {
    .cards--3 {
        --columns: 2;
    }
    .cards--3 > *:last-child {
        grid-column: 1 / -1;
        width: 50%;
        justify-self: center;
    }
}
@media (max-width: 770px) {
    .cards--2, .cards--3 {
        --columns: 1;
    }
    .cards--3 > *:last-child {
        width: 100%;
    }
}
.product-feature--card .product-feature__item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 12px;
    overflow: hidden;
}

@media (min-width: 577px) {
    .product-feature--layout {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
        "item-1 item-1"
        "item-2 item-3"
        "item-4 item-4";
    }
    .product-feature--layout > *:nth-child(1) {
        grid-area: item-1;
    }
    .product-feature--layout > *:nth-child(2) {
        grid-area: item-2;
    }
    .product-feature--layout > *:nth-child(3) {
        grid-area: item-3;
    }
    .product-feature--layout > *:nth-child(4) {
        grid-area: item-4;
    }
}
@media (min-width: 771px) {
    .product-feature--layout {
        grid-template-columns: 1.2fr 1fr 1.2fr;
        grid-template-areas:
        "item-1 item-1 item-2"
        "item-3 item-4 item-4";
    }
    .product-feature--layout > * {
        grid-template-rows: auto 1fr;
    }
}
.product-feature--layout .product-feature__item {
    display: inherit;
    grid-template-areas:
    "img"
    "text";
    gap: 20px;
    padding: 24px;
    border-radius: 8px;
}
.product-feature--layout .product-feature__description {
    display: flex;
    flex-direction: column;
}
.product-feature--layout .product-feature__description > *:last-child {
    margin-top: auto;
}
.product-feature--layout .product-feature__image > * {
    max-height: 449px;
    height: 100%;
}