.service-item {
    --link-text-decoration: none;

    display: flex;
    flex-flow: column wrap;
    gap: 2em 1.5em;
    align-content: stretch;

    .number {
        color: var(--principle-color);
        font-size: calc(3rem + 1vw);
        font-weight: var(--font-weight-semibold);
        flex: 0;
    }

    .image {
        flex: 0;
        max-width: 15em;

        [class*="material-"] {
            font-size: calc(3rem + 1vw);
        }

        .large & {
            flex: 1;
        }
    }


    img {
        width: auto;
        max-width: 100%;
        min-width: 5em;
    }

    @media screen and (width >= 1024px) {
        .medium .number {
            min-width: 100%;
        }

        .medium .copy {
            flex: 1;
        }
    }

    .highlight {
        color: var(--color-brand-dark);
        font-style: normal;
        align-self: start;
    }

    a {
        --icon-bg-size: 16px;
        --icon-border-size: 2px;
        --icon-shift: calc(1px + var(--icon-border-size));
        --icon-color: currentColor; /* stylelint-disable-line value-keyword-case */
        --icon-line-length: 32px;
        --item-padding: 1em;

        padding: var(--item-padding) 0 calc(3 * var(--item-padding)) 0;
        font-size: min(calc(0.5rem + 1vw), 1.5rem);
        flex: 1;

        /* Arrow for service item */
        :hover {
            --icon-shift: calc(0.5em / -2);
            --icon-color: var(--link-color-hover);
        }

        ::before,
        ::after {
            position: absolute;
            border-radius: var(--icon-border-size);
            transition: var(--transition-default);
        }

        ::before {
            content: "";
            display: block;
            width: var(--icon-bg-size);
            height: var(--icon-bg-size);
            box-shadow: var(--icon-border-size) calc(-1 * var(--icon-border-size)) var(--icon-color);
            transform: rotate(45deg);
            bottom: var(--item-padding);
            right: calc(var(--item-padding) + var(--icon-shift));
        }

        ::after {
            content: "";
            width: var(--icon-line-length);
            border-top: calc(var(--icon-border-size)) solid var(--icon-color);
            bottom: calc(var(--item-padding) + (var(--icon-bg-size) - var(--icon-border-size)) / 2);
            right: var(--item-padding);
        }
    }
}

.calcimero {
    border-collapse: collapse;

    th,
    td {
        border-bottom: 1px solid var(--color-ui-borders);
        padding: 0.25em 1em 0.25em 0;
    }

    .price {
        text-align: right;

        .currency {
            float: left;
        }
    }

    /* Checkbox */
    label {
        --checkbox-size: 1.5rem;
        --check-size: 90%;
        --check-position-left: calc((var(--checkbox-size) - var(--check-size)) / 2);
        --checks-border-style: solid;
        --checks-broder-color: var(--color-ui-borders);
        --checks-border-width: 1px;
        --checks-border-radius: 2px;
        --color-checkbox-arrow: var(--color-ui-bg);
        --color-checkbox-bg: var(--color-brand-dark);
        --forms-outline-color: #2853e2;
        --forms-outline-size: 2px;
        --forms-outline: var(--forms-outline-size) solid var(--forms-outline-color);
        --forms-border-color-hover: var(--color-ui-borders);

        box-sizing: border-box;
        border: 0;
        margin: 0;
        font-family: inherit;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        min-height: calc(0.5rem + var(--checkbox-size));
        cursor: pointer;
        align-items: baseline;
        user-select: none;

        *,
        ::after,
        ::before {
            box-sizing: inherit;
        }

        input {
            position: absolute;
            overflow: hidden;
            width: 1px;
            height: 1px;
            padding: 0;
            border: 0;
            margin: -1px;
            clip: rect(0, 0, 0, 0);
            visibility: inherit;
            white-space: nowrap;
        }

        .check-icon {
            position: relative;
            border-style: var(--checks-border-style);
            border-color: var(--checks-broder-color);
            border-width: var(--checks-border-width);
            border-radius: var(--checks-border-radius);
            width: var(--checkbox-size);
            height: var(--checkbox-size);
            margin-right: 0.5rem;
            align-self: center;
            transition: background-color var(--transition-duration) var(--transition-timing-function);
        }

        input[disabled] + .check-icon {
            opacity: 0.2;
        }

        .check-icon::after {
            display: none;
            content: "";
            width: calc(var(--check-size) / 1.5);
            height: calc(var(--check-size) / 3);
            border-bottom: 2px solid var(--color-checkbox-arrow);
            border-left: 2px solid var(--color-checkbox-arrow);
            transform: rotate(-45deg);
            margin: 30% auto auto;
        }

        input:checked + .check-icon {
            border-width: 1px;
            border-color: var(--color-checkbox-bg);
            background-color: var(--color-checkbox-bg);
        }

        input:checked + .check-icon::after {
            display: block;
        }

        &:hover .check-icon { /* stylelint-disable-line no-descending-specificity */
            border-color: var(--forms-border-color-hover);
            background-color: var(--forms-border-color-hover);
        }

        input:focus + .check-icon,
        input:checked:focus + .check-icon {
            outline: var(--forms-outline);
            outline-offset: var(--forms-outline-offset-checks);
        }

    }

}