/* 
------------------------------------------------------------------------------------------------
html structure to use:
------------------------------------------------------------------------------------------------
<div class="kit-tooltip-content">
    <div class="kit-tooltip-col">
        <div class="kit-tooltip-card">
            <div
                class="kit-tooltip-image-label">
                STANDARD</div>
            <img class="kit-tooltip-image" alt="standard" data-align="center" data-entity-type="file"
                data-entity-uuid="65e7a35a-2604-4535-8666-425770b44de0"
                src="/sites/default/files/inline-images/BL-B105AAJX02_1.jpg" />
        </div>
    </div>

    <div class="kit-tooltip-col">
        <div class="kit-tooltip-card">
            <div
                class="kit-tooltip-image-label">
                Heavy duty</div>
            <img class="kit-tooltip-image" alt="heavy duty" data-align="center" data-entity-type="file"
                data-entity-uuid="a5c64b3b-6c23-4937-9fab-509c71177f76"
                src="/sites/default/files/inline-images/BL-H105AACX01_3.jpg" />
        </div>
    </div>
</div>
------------------------------------------------------------------------------------------------
*/
.kit-tooltip-content {
  display: flex;
  flex-wrap: wrap;
  margin: -0.5rem;
}

.kit-tooltip-col {
  padding: 0.5rem;
  width: 50%;
}

.kit-tooltip-card {
  border: 2px solid rgb(229, 231, 230);
  padding: 1rem;
  height: 100%;
}

.kit-tooltip-image-label {
  text-align: center;
  font-weight: 700;
  margin-block-end: 0.75rem;
}

.kit-tooltip-image {
  width: 100%;
  height: auto;
}

@media (max-width: 540px) {
  .kit-tooltip-col {
    width: 100%;
  }
}