/* Grid + gap: @sem may obfuscate Tailwind grid/gap — stable class for Bootstrap */
.hover-principles-grid {
    display: grid;
    width: 100%;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
    .hover-principles-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .hover-principles-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.philosophy-hover-badge {
    width: 3rem;
    height: 3rem;
}

.philosophy-hover-corner {
    width: 2rem;
    height: 2rem;
}

.philosophy-bg__img {
    object-fit: cover;
}

.values-timeline-row__thumb {
    width: 5rem;
    height: 5rem;
}

.values-timeline-row__badge {
    top: -0.5rem;
    right: -0.5rem;
    width: 2rem;
    height: 2rem;
}

.values-timeline-row__line {
    left: 2.5rem;
    top: 0;
    width: 2px;
    height: 2rem;
}

.centered-spine-timeline__line {
    width: 4px;
    left: 50%;
    transform: translateX(-50%);
}

.centered-spine-timeline__dot {
    width: 1.5rem;
    height: 1.5rem;
}