@layer pages {
.packaging-page {
    color: var(--color-brand-dark);
}

.packaging-page__heading {
    margin: 0 0 26px;
}

.packaging-page__layout {
    display: grid;
    grid-template-areas: "cards contact";
    grid-template-columns: minmax(0, 734px) minmax(300px, 349px);
    gap: 20px;
    align-items: start;
    padding: 19px 21px 22px;
    border-radius: var(--radius-panel);
    background: var(--color-section-muted);
}

.packaging-page__cards {
    display: grid;
    grid-area: cards;
    grid-auto-rows: 1fr;
    gap: 19px;
    min-width: 0;
}

.packaging-card {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 58%) minmax(220px, 42%);
    grid-template-areas:
        "title image"
        "description image"
        "price image"
        "benefits benefits";
    grid-template-rows: auto 1fr auto auto;
    column-gap: 14px;
    padding: 35px 19px 32px;
    border-radius: var(--radius-panel);
    background: var(--color-surface);
}

.packaging-card__title {
    grid-area: title;
    margin: 0 0 14px;
    font: 700 24px/1.2 var(--font-family-primary);
    letter-spacing: 0;
}

.packaging-card__description {
    grid-area: description;
    margin: 0;
}

.packaging-card__image {
    display: block;
    width: 100%;
    max-width: 280px;
    height: auto;
    align-self: center;
    grid-area: image;
    justify-self: end;
}

.packaging-card__price {
    grid-area: price;
    margin: 16px 0 0;
}

.packaging-card__benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    grid-area: benefits;
    margin: 38px 0 0;
    padding: 0;
    list-style: none;
}

.packaging-card__benefits li {
    display: grid;
    align-content: center;
    padding: 7px 8px;
    border-radius: var(--radius-control);
    background: var(--color-surface-subtle);
    font: 400 10px/1.1 var(--font-family-primary);
    letter-spacing: 0;
    text-align: center;
}

.packaging-contact {
    grid-area: contact;
    min-width: 0;
    padding: 19px;
    border-radius: var(--radius-panel);
    background: var(--color-brand-dark);
}

.packaging-contact__inner {
    display: grid;
    gap: 20px;
    min-width: 0;
    padding: 26px 13px 20px;
    border-radius: var(--radius-panel);
    background: var(--color-surface);
}

.packaging-contact__title {
    margin: 0;
    color: var(--color-brand-orange);
    font: 700 24px/1.2 var(--font-family-primary);
    letter-spacing: 0;
}

.packaging-contact__description {
    margin: 0;
    font: 500 13px/1.2 var(--font-family-primary);
    letter-spacing: 0;
}

@media (max-width: 767px) {
    .packaging-page__heading {
        margin-bottom: 20px;
    }

    .packaging-page__layout {
        grid-template-areas:
            "contact"
            "cards";
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding: 10px;
    }

    .packaging-page__cards {
        grid-auto-rows: auto;
        gap: 10px;
    }

    .packaging-card {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "title"
            "image"
            "description"
            "price"
            "benefits";
        grid-template-rows: auto;
        padding: 20px 14px;
    }

    .packaging-card__title {
        margin-bottom: 10px;
    }

    .packaging-card__image {
        width: min(100%, 240px);
        margin: 0 auto 16px;
        justify-self: center;
    }

    .packaging-card__price {
        margin-top: 16px;
    }

    .packaging-card__benefits {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 20px;
    }

    .packaging-contact {
        padding: 10px;
    }

    .packaging-contact__inner {
        padding: 20px 14px;
    }
}

}