@import "../../components/hero.css";

/*
    Sommaire:
	2. Intro
	3. Details
*/

/*
    ==============================
    📱 Mobile
    ==============================
*/

.section {
	&:nth-child(odd) {
		background: var(--color-grey-100);
	}

	&:nth-child(even) {
		background: var(--color-grey-200);
	}
}

.alternance-intro,
.alternance-details {
	padding: var(--space-vertical) var(--space-horizontal);
}

/* 2. Intro */

.articles-intro-container {
	display: grid;
	gap: var(--space-l);
	align-items: center;
}

.alternance-intro-textes {
	display: grid;
	height: fit-content;
	gap: var(--space-s);
}

.alternance-intro-image {
	object-fit: cover;
	aspect-ratio: 16/9;
	border-radius: var(--space-xs);
}

/* 3. Details */

.alternance-details-container {
	display: grid;
	gap: var(--space-l);
}

.alternance-details-infos-container {
	display: grid;
	gap: var(--space-m);
}

.infos-container {
	height: fit-content;
	display: grid;
	gap: var(--space-s);
}

.infos-content-container {
	display: grid;
	gap: var(--space-xs);
}

.cta-container {
	display: flex;
	justify-content: center;
}

/*
    ==============================
    🖥️ Desktop
    ==============================
*/
@media only screen and (min-width: 1024px) {
	/* 2. Intro */

	.articles-intro-container {
		gap: calc(var(--space-2xl) * 2);
		grid-template-columns: repeat(2, 1fr);
	}

	/* 3. Details */

	.alternance-details-infos-container {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-2xl);
	}
}