.system-components-pack-name { font-weight: 500; font-size: 1.75rem; font-family: 'Fjalla One'; line-height: 2.2rem; margin-bottom: 25px; }
.system-components-pack.special > .system-components-pack-name { border-bottom: 2px solid var(--secondary-color); padding-bottom: 10px; }
.system-components-pack-list { --cols: 4; --gap: 2px; display: flex; flex-wrap: wrap; gap: var(--gap); }
.system-components-pack.special > .system-components-pack-list { --cols: 2; }
.system-components-pack-item { display: contents; }
.system-components-pack-item-inner { width: calc(100% / var(--cols) - var(--gap) / var(--cols)*(var(--cols) - 1)); display: flex; flex-direction: column; background: var(--octonary-color); }
.system-components-pack-item.break:after { content: ''; width: 100%; }
.system-components-pack-item-link { display: block; position: relative; }
.system-components-pack.special .system-components-pack-item-link { --cols: 2; --gap: 2px; display: flex; flex-wrap: wrap; gap: var(--gap); }
.system-components-pack-item-image { width: 100%; mix-blend-mode: multiply; transform: scale(0.95); transition: 0.3s linear; }
.system-components-pack-item-image.resize { transform: scale(0.45); }
.system-components-pack.special .system-components-pack-item-image-wrapper { width: calc(50% - var(--gap)); }
.system-components-pack-item-content { padding-inline: 30px; margin-bottom: 30px; }
.system-components-pack.special .system-components-pack-item-content { width: 50%; display: flex; flex-wrap: wrap; align-content: center; margin-top: 25px; margin-bottom: 0px; padding-inline: 0; }

.component-detail-info-item { display: flex; align-items: center; margin-bottom: 5px; }
.component-detail-info-item-icon { width: 10px; height: auto; aspect-ratio: 1 / 1; border-radius: 50%; }
.component-detail-info-item-image { min-width: 10px; height: auto; }
.component-detail-info-item-icon-green { background: #008000; }
.component-detail-info-item-icon-orange { background: #ffa500; }
.component-detail-info-item-icon-blue { background: #0000ff; }
.component-detail-info-item-description { width: 100%; font-weight: 300; margin-left: 10px; font-size: 0.95rem; line-height: 1.2rem; }

.system-components-pack-item-price-wrapper { margin-bottom: 20px; }
.system-components-pack-item-price { color: var(--secondary-color); font-weight: 500; text-transform: uppercase; margin-bottom: 6px; font-size: 1.25rem; line-height: 1.4rem; }
.system-components-pack-item-price-vat { text-transform: uppercase; font-size: 1rem; line-height: 1.1rem; }
.system-components-pack-item-price-barr { text-transform: uppercase; margin-bottom: 6px; font-size: 1rem; line-height: 1.1rem; text-decoration: line-through; }
.system-components-pack-item-price-note { margin-left: 3px; }
.system-components-pack-item-name { margin-top: 10px; margin-bottom: 20px; font-weight: 300; font-size: 1.1rem; line-height: 1.3rem; }
.system-components-pack.special .system-components-pack-item-name { width: 100%; }
.system-components-pack-item-code { font-weight: 500; margin-bottom: 5px; }
.system-components-pack.special .system-components-pack-item-code { width: 100%; }
.system-components-pack-item-note { font-weight: 300; margin-bottom: 5px; font-size: 0.95rem; line-height: 1.2rem; }
.system-components-pack.special .system-components-pack-item-note { width: 100%; }
.system-components-pack-item-properties { display: flex; align-items: center; }
.system-components-pack-item-property:not(:last-child) { margin-right: 5px; }
.system-components-pack-item-cta-wrapper { display: flex; justify-content: flex-end; margin-top: auto; }
.system-components-pack-item-cta { background: var(--secondary-color); cursor: pointer; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; transition: 0.3s linear; }
.system-components-pack-item-cta-icon { width: 22px; height: 22px; fill: #FFF; }
.system-components-pack-item-label { padding: 8px 10px; float: right; background-color: #a7a9ac; color: #fff; text-transform: uppercase; font-weight: 300; font-size: 1rem; line-height: 1.1rem; position: absolute; top: 0; right: 0; }
.system-components-pack-item-cta.system-components-pack-item-cta-cart.product-in-cart { background: var(--senary-color); opacity: 0.7; cursor: default; }

.system-components-pack:not(.special) .system-components-pack-item-image-wrapper { min-height: 350px; display: flex; justify-content: center; align-items: center; }

.system-components-wrapper .system-components-pack-name { text-align: center; }

.system-components-pack-item-price-label { color: var(--secondary-color); font-size: 1rem; }

@media (pointer:fine) { 
    .system-components-pack-item-link:hover .system-components-pack-item-image { transform: scale(0.85); }
    .system-components-pack-item-link:hover .system-components-pack-item-image.resize { transform: scale(0.40); }
    .system-components-pack-item-cta:hover { background: var(--tertiary-color); }
}

@media (max-width:1600px) {
    .system-components-pack-list { --cols: 3; }
}

@media (max-width:1200px) {
    .system-components-pack-list { --cols: 2; }
    .system-components-pack-name { font-size: 1.65rem; line-height: 2.05rem; }
}

@media (max-width:1023px) {
    .system-components-pack-list { --cols: 3; }
}

@media (max-width:767px) {
    .system-components-pack-name { padding-inline: var(--global-padding-inline); }
    .system-components-pack-item-content { padding-inline: 20px; }

    .system-components-pack.special > .system-components-pack-list { --cols: 3; }
    .system-components-pack.special .system-components-pack-item-link { display: block; }
    .system-components-pack.special .system-components-pack-item-image-wrapper { width: 100%; }
    .system-components-pack.special .system-components-pack-item-content { width: 100%; display: block; padding-inline: 30px; margin-bottom: 30px; }

    .system-components-pack-item-name { margin-bottom: 20px; font-weight: 300; font-size: 1.1rem; line-height: 1.3rem; }
    .system-components-pack.special .system-components-pack-item-name { width: 100%; }
    .system-components-pack-item-code { font-weight: 500; margin-bottom: 5px; }
    .system-components-pack.special .system-components-pack-item-code { width: 100%; }
    .system-components-pack-item-note { font-weight: 300; margin-bottom: 5px; font-size: 0.95rem; line-height: 1.2rem; }
    .system-components-pack.special .system-components-pack-item-note { width: 100%; }

    .system-components-pack:not(.special) .system-components-pack-item-image-wrapper { min-height: 250px; }
}

@media (max-width:640px) {
    .system-components-pack-list { --cols: 2; }
}

@media (max-width:480px) {
    .system-components-pack-list { --gap: 5px; }
    .system-components-pack-name { font-size: 1.5rem; line-height: 1.9rem; }

    @media (pointer: coarse) {
        .system-components-pack-list { scroll-snap-type: x mandatory; width: 100vw; display: flex; overflow-x: scroll; flex-wrap: nowrap; -ms-overflow-style: none; scrollbar-width: none; }
        .system-components-pack-item { display: block; scroll-snap-align: center; width: 70%; flex: none; height: auto; }
        .system-components-pack-item-inner { width: 100%; height: 100%; }
    }
}