section.common:not(.calc.delivery)
{
    --section-vert-margin:0;
}

section.common :is(p,li)
{
    color:var(--light-black);
}

/* --- Contents --- */
section.common .contents>*
{
    flex:1 0 32em;
}

section.common .contents>.wp-block-media-text__content
{
    padding:2.5em 0;
}

section.common .contents>figure
{
    align-self:stretch;
}

section.common .contents>figure>img
{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}

section.common .contents ul>li
{
    background-image:var(--li-marker-green);
}

@media(max-width:768px)
{
    section.common .contents>figure
    {
        order:1;
    }
}

/* --- Grids --- */
section.common :is(.services,.wares,.price_factors)>.item
{
    display:flex;
    flex-flow:column;
    gap:var(--flex-gap-s);
    padding:2.25em;
    font-size:1.4rem;
    border:1px solid var(--light-grey);
}

section.common :is(.services,.wares,.price_factors)>.item>.img
{
    width:3.5em;
    flex:0 0 3.5em;
    background:none center/contain no-repeat transparent;
}

section.common :is(.services,.wares,.price_factors)>.item:nth-child(1) {grid-area:i1;}
section.common :is(.services,.wares,.price_factors)>.item:nth-child(2) {grid-area:i2;}
section.common :is(.services,.wares,.price_factors)>.item:nth-child(3) {grid-area:i3;}
section.common :is(.services,.wares,.price_factors)>.item:nth-child(4) {grid-area:i4;}
section.common :is(.services,.wares,.price_factors)>.item:nth-child(5) {grid-area:i5;}
section.common :is(.services,.wares,.price_factors)>.item:nth-child(6) {grid-area:i6;}
section.common :is(.services,.wares,.price_factors)>.item:nth-child(7) {grid-area:i7;}
section.common :is(.services,.wares,.price_factors)>.item:nth-child(8) {grid-area:i8;}

/* -- Services -- */
section.common .services
{
    grid:"i1 i2 i3" "i4 i4 i3" / 25% 25% 50%;
}

section.common .services>.item.arrow-bg
{
    padding-right:25%;
    background:var(--li-marker-green) right bottom/calc(25% - 2.25em) auto no-repeat transparent;
}

@media(max-width:768px)
{
    section.common .services
    {
        grid:"i1 i2" "i3 i4" / 50% 50%;
    }

    section.common .services>.item.arrow-bg
    {
        padding-right:2.25em;
        background:none transparent;
    }
}
@media(max-width:360px)
{
    section.common .services
    {
        grid:"i1" "i2" "i3" "i4" / 100%;
    }
}

/* -- Wares -- */
section.common .wares
{
    grid:"i1 i2 i3 i4" "i5 i5 i6 i6" / 25% 25% 25% 25%;
}

@media(max-width:768px)
{
    section.common .wares
    {
        grid:"i1 i2" "i3 i4" "i5 i6" / 50% 50%;
    }
}
@media(max-width:360px)
{
    section.common .wares
    {
        grid:"i1" "i2" "i3" "i4" "i5" "i6" / 100%;
    }
}

/* -- Price factors -- */
section.common .price_factors
{
    grid:"i1 i2 i5" "i3 i4 i5" / 25% 25% 50%;
}

section.common .price_factors>.item.plastic-brick-bg
{
    padding-right:50%;
    background:url('/app/uploads/2025/05/logistic-in-russia-016.webp') right bottom/calc(50% - 2.25em) auto no-repeat transparent;
}

@media(max-width:768px)
{
    section.common .price_factors
    {
        grid:"i1 i2" "i3 i4" "i5 i5" / 50% 50%;
    }

    section.common .price_factors>.item.plastic-brick-bg
    {
        background-position:75% bottom;
        background-size:auto 100%;
    }
}
@media(max-width:510px)
{
    section.common .price_factors>.item.plastic-brick-bg
    {
        padding-right:2.25em;
        background:none transparent;
    }
}
@media(max-width:360px)
{
    section.common .price_factors
    {
        grid:"i1" "i2" "i3" "i4" "i5" / 100%;
    }
}
