﻿.supersprint-pack { display: flex; gap: 0 2px; flex-wrap: wrap; }
.supersprint-pack-title { margin: 0 0 25px; width: 100%; font-size: 32px; line-height: 36px; font-weight: 500; font-family: 'Fjalla One'; text-align: center; }
.supersprint-pack-title.pack-special { padding-bottom: 15px; border-bottom: 2px solid var(--secondary-color); }
.supersprint-pack-component-container { position: relative; display: flex; margin-bottom: 2px; width: calc(25% - 1.5px); background: var(--octonary-color); flex-direction: column; }
.supersprint-pack-component-container.pack-special { width: calc(50% - 1px); }
.supersprint-pack-component { display: block; }
.supersprint-pack-component.pack-special { display: flex; gap: 50px; align-items: center; }
.supersprint-pack-component-image { display: block; margin: 30px; width: calc(100% - 60px); mix-blend-mode: multiply; }
.supersprint-pack-component-image.resize { transform: scale(.45); }
.supersprint-pack-component-image.pack-special { margin: 30px 0 0 30px; width: calc(50% - 55px); }
.supersprint-pack-component-content { margin: 0 30px 15px; }
.supersprint-pack-component-content.pack-special { margin: 30px 30px 0 0; width: calc(50% - 55px); }
.supersprint-pack-component-price { margin: 5px 0; color: var(--secondary-color); font-size: 20px; line-height: 24px; font-weight: 500; text-transform: uppercase; }
.supersprint-pack-component-price.stroked { color: inherit; font-size: 16px; line-height: 18px; text-decoration: line-through; }
.supersprint-pack-component-price.vat-included { color: inherit; font-size: 16px; line-height: 18px; }
.supersprint-pack-component-title { margin: 15px 0; font-size: 18px; line-height: 24px; font-weight: 300; }
.supersprint-pack-component-code { margin: 5px 0; font-weight: 500; }
.supersprint-pack-component-notes { margin: 5px 0; font-weight: 300; }
.supersprint-pack-component-sempathore { display: flex; margin: 5px 0; font-size: 14px; line-height: 18px; font-weight: 300; gap: 10px; align-items: center; }
.supersprint-pack-component-sempathore:before { content: ''; display: block; width: 10px; height: 10px; background: var(--semaphore); border-radius: 50%; flex-shrink: 0; }
.supersprint-pack-component-properties { display: flex; margin: 5px 0; gap: 15px; flex-wrap: wrap; align-items: center; }
.supersprint-pack-component-property { display: block; }
.supersprint-pack-component-button { display: block; margin: auto 0 0 auto; width: 50px; height: 50px; background: var(--secondary-color) center / 25px no-repeat; transition: .25s; user-select: none; cursor: pointer; }
.supersprint-pack-component-button.buy { background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%20-960%20960%20960%22%20fill%3D%22%23FFF%22%3E%3Cpath%20d%3D%22M280-80q-33%200-56.5-23.5T200-160q0-33%2023.5-56.5T280-240q33%200%2056.5%2023.5T360-160q0%2033-23.5%2056.5T280-80Zm400%200q-33%200-56.5-23.5T600-160q0-33%2023.5-56.5T680-240q33%200%2056.5%2023.5T760-160q0%2033-23.5%2056.5T680-80ZM246-720l96%20200h280l110-200H246Zm-38-80h590q23%200%2035%2020.5t1%2041.5L692-482q-11%2020-29.5%2031T622-440H324l-44%2080h440q17%200%2028.5%2011.5T760-320q0%2017-11.5%2028.5T720-280H280q-45%200-68-39.5t-2-78.5l54-98-144-304H80q-17%200-28.5-11.5T40-840q0-17%2011.5-28.5T80-880h65q11%200%2021%206t15%2017l27%2057Zm134%20280h280-280Z%22%2F%3E%3C%2Fsvg%3E); }
.supersprint-pack-component-button.disabled { background-color: var(--senary-color); background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%20-960%20960%20960%22%20fill%3D%22%23FFF%22%3E%3Cpath%20d%3D%22M440-720h-80q-17%200-28.5-11.5T320-760q0-17%2011.5-28.5T360-800h80v-80q0-17%2011.5-28.5T480-920q17%200%2028.5%2011.5T520-880v80h80q17%200%2028.5%2011.5T640-760q0%2017-11.5%2028.5T600-720h-80v80q0%2017-11.5%2028.5T480-600q-17%200-28.5-11.5T440-640v-80ZM280-80q-33%200-56.5-23.5T200-160q0-33%2023.5-56.5T280-240q33%200%2056.5%2023.5T360-160q0%2033-23.5%2056.5T280-80Zm400%200q-33%200-56.5-23.5T600-160q0-33%2023.5-56.5T680-240q33%200%2056.5%2023.5T760-160q0%2033-23.5%2056.5T680-80ZM120-800H80q-17%200-28.5-11.5T40-840q0-17%2011.5-28.5T80-880h66q11%200%2021%206t15%2017l159%20337h280l145-260q5-10%2014-15t20-5q23%200%2034.5%2019.5t.5%2039.5L692-482q-11%2020-29.5%2031T622-440H324l-44%2080h440q17%200%2028.5%2011.5T760-320q0%2017-11.5%2028.5T720-280H280q-45%200-68.5-39t-1.5-79l54-98-144-304Z%22%2F%3E%3C%2Fsvg%3E); cursor: default; }
.supersprint-pack-component-button.quote { background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%20-960%20960%20960%22%20fill%3D%22%23FFF%22%3E%3Cpath%20d%3D%22M480-280q17%200%2028.5-11.5T520-320v-160q0-17-11.5-28.5T480-520q-17%200-28.5%2011.5T440-480v160q0%2017%2011.5%2028.5T480-280Zm0-320q17%200%2028.5-11.5T520-640q0-17-11.5-28.5T480-680q-17%200-28.5%2011.5T440-640q0%2017%2011.5%2028.5T480-600Zm0%20520q-83%200-156-31.5T197-197q-54-54-85.5-127T80-480q0-83%2031.5-156T197-763q54-54%20127-85.5T480-880q83%200%20156%2031.5T763-763q54%2054%2085.5%20127T880-480q0%2083-31.5%20156T763-197q-54%2054-127%2085.5T480-80Z%22%2F%3E%3C%2Fsvg%3E); }
.supersprint-pack-component-clearance { position: absolute; top: 0; right: 0; padding: 8px 10px; color: #FFF; font-size: 16px; line-height: 18px; font-weight: 300; text-transform: uppercase; background: #a7a9ac; }
.supersprint-pack-component-break { width: 100%; }

@media (max-width: 1600px) {
    .supersprint-pack-component-container { width: calc(33.3333% - 1.3333px); }
}

@media (max-width: 1280px) {
    .supersprint-pack-title { font-size: 28px; }
    .supersprint-pack-component-container { width: calc(50% - 1px); }
    .supersprint-pack-component-container.pack-special { width: 100%; }
}

@media (max-width: 480px) {
    .supersprint-pack { display: block; }
    .supersprint-pack-title { font-size: 24px; }
    .supersprint-pack-component-container,
    .supersprint-pack-component-container.pack-special { margin-bottom: 10px; width: unset; }
    .supersprint-pack-component.pack-special { display: block; }
    .supersprint-pack-component-image.pack-special { margin: 30px; width: calc(100% - 60px); }
    .supersprint-pack-component-content.pack-special { margin: 0 30px 15px; width: unset; }
}