:root {
    --filter-png: invert(70%);

}

:root[data-color-scheme="dark"] {
    --filter-png: invert(0%);
}

body {
    grid-template-rows: 230px 1fr min-content var(--footer-size);
}



main {
    grid-template-rows: 1fr;
    grid-template-columns: 450px 1fr;
}

.pay_system {
    grid-row: 1;
    grid-column: 1;
    display: grid;
    grid-template-rows: max-content max-content;
    grid-auto-flow: row;
    grid-auto-rows: max-content;
    grid-template-columns: auto;
    place-content: center;
    row-gap: 2em;
}

.pay_system figure {
    margin: 0;
    padding: 0;
    text-align: center;
}

.pay_system figure img {
    filter: var(--filter-png);
    transition: filter .3s;
}


#priceList {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    max-width: 1000px;
    /* width: 800px; */
}

.hex_general {
    fill: url(#radialGradient4);
    filter: drop-shadow(5px 10px 5px hsla(0, 0%, 0%, .3));
    display: inline;
    fill-opacity: 1;
    stroke: #fafff6;
    stroke-width: 2;
    stroke-dasharray: none;
    stroke-opacity: 1;
    image-rendering: auto;
}

.limit {
    font-weight: 500;
    font-size: 38px;
}

.limit tspan {
    font-weight: 400;
    font-size: 18px;
}

.tarif_name {
    fill: rgb(59 57 68);
    font-weight: 600;
}

.h1 {
    font-weight: 500;
    font-size: 42px;
    fill: rgb(69 68 83);
}

.pay_system .hgrad {
    text-align: center !important;
}

@media screen and (max-width: 1220px) {
    main {
        grid-template-columns: 280px 1fr;
    }
}

@media screen and (max-width: 850px) {
    body {
        grid-template-rows: 150px 1fr min-content var(--footer-size);
    }

    main {
        grid-template-rows: min-content auto auto;
        grid-template-columns: 1fr;
    }

    #priceList {
        grid-column: 1;
        grid-row: 1;
    }

    .pay_system {
        grid-row: 2;
        grid-column: 1;
    }
}

@media screen and (max-width: 450px) {
    body {
        grid-template-rows: 120px 1fr min-content var(--footer-size);
    }

}