/*
*
* ==========================================
* DTJ Galerie
* ==========================================
*
*/

.dtj-grid {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 20px;
	margin: 2rem 0 4rem 0;
}

.dtj-grid * {
    color: rgba(0, 0, 0, 0.5);
    color: var(--e-global-color-text);
    font-size: 13px;
}
.dtj-grid div:last-child {
	color: var(--e-global-color-primary);
}

.dtj-grid .item {
    background: #fff;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
}

@media(max-width:1024px) {
	.dtj-grid {
    	grid-template-columns: repeat(4, 1fr);
	}
}
@media(max-width:768px) {
	.dtj-grid {
    	grid-template-columns: repeat(3, 1fr);
	}
}

@media(max-width:640px) {
	.dtj-grid {
    	grid-template-columns: repeat(1, 1fr);
	}
}

/*
*
* ==========================================
* Design Kategorie
* ==========================================
*
*/

.design-kategorien {
    text-align: center;
    margin: 2rem 0 4rem 0;
}

.design-kategorien ul {
    margin: 2rem 0 0 0;
    padding: 0;
    list-style: none;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
}

.design-kategorien li {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .1);
    padding-top: 1rem;
}

.design-kategorien span {
    display: block;
    text-align: center;
    margin-top: -1.5rem;
    padding-bottom: 1.5rem;
}
.design-kategorien a {
    color: rgba(0, 0, 0, 0.5);
    color: var(--e-global-color-text);
}

/*
*
* ==========================================
* Konfigurator
* ==========================================
*
*/

.konfigurator {
    text-align: center;
}
.konfigurator .elementor-text-editor {
    border: 40px solid #000;
    border-radius: 20px;
    box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, .3);
    display: inline-block;
}
.dsg_home {
    margin: 0 auto !important;
    text-align: left;
}
#dsg_main {
    border: 2px solid color: rgba(0, 0, 0, 0.75);
    padding-bottom: 0 !important;
}

@media(max-width:1024px) {
    .konfigurator-wrapper .elementor-container {
        max-width: none !important;
    }
    #dsg_main {
        border: 0px;
        border-radius: 0;
    }
    .konfigurator .elementor-text-editor {
        border: 0px;
        border-radius: 0;
        box-shadow: none;
    }
}
@media(max-width:768px) {
    .design-kategorien ul {
        grid-template-columns: repeat(3, 1fr);
    }
 }
@media(max-width:640px) {
	.design-kategorien,
	.dtj-grid {
    	margin: 2rem 0;
	}
    .design-kategorien ul {
        grid-template-columns: repeat(1, 1fr);
    }
}