/**
 * section-penalties — что будет с штрафами (баннер-вывод).
 */

.section-penalties {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.625rem;
    box-sizing: border-box;
    width: 100%;
    max-width: 81.25rem; /* 1300px */
    margin: 0 auto var(--site-section-gap);
    height: 28.125rem; /* 450px */
    padding: 3.5rem; /* 56px */
    background-image:
        linear-gradient(104.56deg, var(--site-scrim-mid) 50.48%, var(--site-scrim-soft) 95.8%),
        var(--penalties-image);
    background-size: auto, cover;
    background-position: 0 0, center;
    background-repeat: no-repeat, no-repeat;
    border: 0.0625rem solid var(--site-scrim-border);
    border-radius: 1.875rem; /* 30px */
}

.section-penalties .section-content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem; /* 20px */
    width: 21.5625rem; /* 345px */
    height: fit-content;
    border-radius: 1.25rem;
    -webkit-backdrop-filter: blur(0.25rem);
    backdrop-filter: blur(0.25rem);
}

.section-penalties .heading {
    align-self: stretch;
    margin: 0;
    font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
    font-size: 1.875rem; /* 30px */
    font-weight: 800;
    line-height: 1.15;
    color: var(--site-on-accent);
}

.section-penalties .description {
    align-self: stretch;
    margin: 0;
    font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
    font-size: 0.875rem; /* 14px */
    font-weight: 600;
    line-height: normal;
    color: var(--site-on-accent);
}

/* Tablet */
@media (max-width: 63.9375rem) {
    .section-penalties {
        padding: 2.5rem; /* 40px */
        background-image:
            linear-gradient(118.27deg, var(--site-scrim-mid) -25.41%, var(--site-scrim-soft) 17.65%),
            var(--penalties-image);
        background-size: auto, 84.3544rem 28.1181rem;
        background-position: 0 0, -32.6763rem 0.0119rem;
    }
}

/* Phone */
@media (max-width: 47.9375rem) {
    .section-penalties {
        padding: 2.5rem 1.25rem; /* 40px 20px */
        background-image:
            linear-gradient(135.23deg, var(--site-scrim-mid) -140.64%, var(--site-scrim-soft) -101%),
            var(--penalties-image);
        background-size: auto, 84.375rem 28.125rem;
        background-position: 0 0, -46.6269rem 0;
    }

    .section-penalties .section-content {
        align-self: stretch;
    }
}