.color-primary {
    color: var(--cd-primary-color) !important;
}

.color-bg-primary {
    background-color: var(--cd-primary-color) !important;
}

.main-title {
    font-size: 2.75rem;
}

.section-title {
    font-size: 2.25rem;
}

.bg-primary {
    background-color: #ebebf1 !important;
}

.bg-primary {
    background-color: var(--cd-primary-color) !important;
}

.btn-primary-custom {
    background-color: var(--cd-primary-color) !important;
    border-color: var(--cd-primary-color) !important;
}

.btn-outline-primary-custom {
    border-color: var(--cd-primary-color) !important;
    color: var(--cd-primary-color) !important;
}

.btn-outline-primary-custom:hover {
    background-color: transparent !important;
    color: var(--cd-primary-color) !important;
}

.btn-soft-primary {
    color: var(--cd-primary-color) !important;
    background-color: transparent !important;
    border-color: var(--cd-primary-color) !important;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 1rem;
}
.grid > div {
    padding: 1rem;
    display: grid;
    place-items: center;
}
.grid > div::before {
    content: "";
    display: block;
    padding-bottom: 100%;
    grid-area: 1/1/2/2;
}
.grid > div img {
    width: 100%;
    grid-area: 1/1/2/2;
}

.hero-car {
    position: absolute;
    transform: translate(30%);
    left: -20px;
    width: 1200px;
    z-index: 0;
}

@media only screen and (max-width: 1100px) {
    .hero-car {
        position: absolute;
        transform: translate(-50%);
        left: -20px;
        width: 600px;
    }
}

@media only screen and (max-width: 900px) {
    .hero-car {
        transform: translate(-50%, var(--carperc));
    }
}