.materialien-text {
    .content-tile-fw {
        .content-tile-text-fw {
            padding: 4rem 2rem;
            max-width: 900px;
            text-align: center;
            margin: 0 auto;
            
            p {
                margin:0;
            }
        }
    }
}

.content-tile-text-fw {

            .cta-button {
                margin: 3rem auto;
            } 
    }

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 4rem 1rem;
    max-width: 600px;
    padding: 0 1rem;
	margin: 0 auto;
}

.grid-item {
    height: auto;
    position: relative;
}
	

.grid-item-link {
	padding: 10px 0 0 10px;
    color: #000;
    width: 100%;
	font-weight: 700;
	display: flex;
    align-items: center;
	
	#arrow-small-right {
		padding-left: 10px;
	}

    &:hover {
        color: var(--gn-text-hover-color);
        fill: var(--gn-text-hover-color);
    }
}

.grid-item-img-wrapper {
    height: 220px;
    overflow: hidden;
}

.grid-item-img {
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    display: block;

    -webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	/* VERZÖGERUNG */
	-webkit-transition: 1s transform cubic-bezier(0.22, 0.61, 0.36, 1);
    -moz-transition: 1s transform cubic-bezier(0.22, 0.61, 0.36, 1);
    -ms-transition: 1s transform cubic-bezier(0.22, 0.61, 0.36, 1);
    -o-transition: 1s transform cubic-bezier(0.22, 0.61, 0.36, 1);
    transition: 1s transform cubic-bezier(0.22, 0.61, 0.36, 1);

    &:hover {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1);
    }
}

/* Styling der Unterseiten */
.submenu {
    width: 100%;
    text-align: center;
    padding: 1rem 0;
    float: left;

    .submenu-backlink {
        padding: .5rem 0rem .5rem 0rem;
        min-width: 300px;    
    }

    .submenu--link,
    .submenu--link-back {
        padding: .5rem 0;
        font-weight: 700;
        font-size: 14px;
        list-style: none;

        i {
            padding-right: 10px;
            vertical-align: middle;
        }
    }
}

.content-tile-fw {

    .content-tile-text-fw {
            padding: 2rem 2rem;
            max-width: 1000px;
            margin: 0 auto;

            .title2 {
                margin: 1.5rem 0;
            }
    }

    .table2 {
        border-collapse: collapse;
        width: 100%;
        max-width: 500px;
        margin: 2rem 0;
    }

}

.gn-image-slider-2-headline {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 2rem;
}

.gn-image-slider-2 {
    padding: 0.5rem 2rem 6rem 2rem;

    .slider-style-container .flickity-slider>:not(.is-selected) {
        opacity: 0;
    }

    .img .caption {
        transform: none;
        background-color: transparent;
    }
        
}

/* Styling der kleinen Materialbilder bei Leder, oder Stoffen*/
.info-content {
    max-width: 1100px;
    margin: 0 auto 4rem auto;

    .material-pic {
        width: 48%;
        float: left;
        margin-right: 2%;

        .material-label {
            text-align: center;
            margin-top: 0.5rem;
        }
    }
}

@media only screen and (min-width: 550px) {
/*************** Tablet Viewport ***************/
  
    .materialien-text{
            .content-tile-fw {
                .content-tile-text-fw {
                    padding: 4rem 4rem;
                }
            }
    }

    .grid-container {
		grid-gap: 6rem 2rem;
		padding: 0 3rem;
	}

    .grid-item-img-wrapper {
        height: 300px;
    }

    /* Styling der kleinen Materialbilder bei Leder, oder Stoffen*/
    .info-content {
        .material-pic {
            width: 24%;
            margin-right: 1%;
        }
    }

}



@media only screen and (min-width: 850px) {
/*************** Tablet Landscape Breakpoint ***************/

    .materialien-text{
        .content-tile-fw {
            .content-tile-text-fw {
                padding: 5.75rem 4rem;
            }
        }
    }

    .grid-container {
        padding: 0 2rem;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		max-width: 900px;
    }

	.grid-item-img-wrapper {
        height: 220px;
    }


    /* Styling der Unterseiten */
    .content-tile-fw {
        .content-tile-text-fw {
            padding: 8rem 2rem 2rem 2rem;
        }
    }
}



@media only screen and (min-width: 1110px) {
/*************** Desktop Breakpoint ***************/
   
    .grid-container {
        grid-gap: 3rem;
		max-width: 1400px;
    }

	.grid-item-img-wrapper {
        height: 380px;
    }

	.grid-item-link {
		padding: 20px 0 0 16px;
		font-size: 18px;
		
		#arrow-small-right {
			padding-left: 20px;
			height: 20px;
		}
	}

}