.about--principles {
    background     : var(--color--gradient--purple);
    margin-top     : 0;
    margin-bottom  : 4.2rem;
    padding-top    : 0;
    padding-bottom : 4.2rem;
}

@media all and (min-width : 760px) {
    .about--principles {
        margin-top     : 6rem;
        margin-bottom  : 6rem;
        padding-top    : 6rem;
        padding-bottom : 6rem;
    }
}

.about--principles h2 {
    margin-top : 0;
    color      : var(--color--white);
    font-size  : 3.2rem;
	position   : relative;
	top        : 4.8rem;
}

@media all and (min-width : 760px) {
	
	.about--principles {
		margin-top     : 4.2rem;
	}
	
	.about--principles header {
       overflow: visible;
       padding-top: 0;

    }
    .about--principles h2 {
      padding-top: 86px;
      top: 0;
      position: sticky;
    }
	
}

.about--principles--items {
    padding-top    : 60px;
    display        : flex;
    flex-direction : column;
}

@media all and (min-width : 760px) {
    .about--principles--items {
        flex-direction : row;
        flex-wrap      : wrap;
        margin         : 0 -1.5rem;
    }
}

.about--principles--items .item {
    flex-basis  : 50%;
    flex-grow   : 0;
    flex-shrink : 0;
    padding     : 0.8rem 0;
    box-sizing  : border-box;
}

@media all and (min-width : 760px) {
    .about--principles--items .item {
        padding : 1.5rem;
    }
}

.about--principles--items .item .wrapper {
    background-color : var(--color--white);
    padding          : 3rem;
    border-radius    : 1.6rem;
    box-sizing       : border-box;
    height           : 100%;
}

.about--principles--items .item .wrapper h3 {
    height        : 4em;
    margin-top    : 0;
    width         : 50%;
    margin-bottom : 1em;
    font-size     : 2.4rem;
}

/*# sourceMappingURL=style.css.map */