
/* SIMBIOSIES SECTION */

.notch.simb-notch {
	background-color: var(--color-dark-sand);
}

.simbioses .content, .notch.simb-notch .notch-left, .notch.simb-notch .notch-right {
	background: var(--color-orange);
}

.simbioses .grid {
	padding: var(--section-padding-y-lg) var(--spacing-wrapper);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, auto);
    gap: var(--grid-gap-y) var(--grid-gap-x);
}

.simb1 {
	display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--gap-fixed);
}

.simb3 {
    grid-column: span 2 / span 2;
	text-align: right;
}

.simb4 {
    grid-column: span 3 / span 3;
    grid-row-start: 2;
}

.simb5 {
    grid-column-start: 4;
    grid-row-start: 2;
	text-align: right;
}

.simb6 {
    grid-column: span 4 / span 4;
    grid-row-start: 3;
	display: flex;
    justify-content: space-between;
	align-items: flex-end;
}

.simb6 p {
	margin: 0;
}
.simb6 p:first-child {
	width: 16.5%;
	font-size: var(--font-size-text-xl);
    font-style: normal;
    font-weight: 400;
    line-height: var(--line-height-text-xl);
    letter-spacing: var(--letter-spacing-text-xl);
	margin: 0;
}
.simb6 p:last-child {
	width: 20.5%;
	font-size: var(--font-size-text-md);
    font-style: normal;
    font-weight: 400;
    line-height: var(--line-height-text-md);
    letter-spacing: var(--letter-spacing-text-md);
	margin: 0;
}

.simbioses .h2.marked,
.simbioses span.marked {
	color: var(--color-sand);
}

.simbioses .section-subtitle {
	color: var(--color-text-primary);
}

.simbioses .section-subtitle mark {
	color: var(--color-sand);
	background: transparent;
}

@media (max-width: 1024px) {
    .simb6 p:first-child {
        width: 20.5%;
        font-size: var(--font-size-text-md);
        line-height: var(--line-height-text-md);
        letter-spacing: var(--letter-spacing-text-md);
    }
    .simb6 p:last-child {
        width: 24.5%;
        font-size: var(--font-size-text-sm);
        line-height: var(--line-height-text-sm);
        letter-spacing: var(--letter-spacing-text-sm);
    }
}

@media (max-width: 768px) {
    .simb1 {
        grid-row-start: 1;
		grid-column-start: 1;
		grid-column: span 4 / span 4;
    }
    .simb6 {
        flex-wrap: wrap;
        gap: 12px;
    }
    .simb6 p:first-child, .simb6 p:last-child {
        width: 100%;
    }
    .simb6 p:first-child {
        font-size: var(--font-size-text-xl);
        line-height: var(--line-height-text-xl);
        letter-spacing: var(--letter-spacing-text-xl);
    }
    .simb6 p:last-child {
        font-size: var(--font-size-text-md);
        line-height: var(--line-height-text-md);
        letter-spacing: var(--letter-spacing-text-md);
    }
}