@import './base.css';

.team-view_section{
	display:none;
	width: 80vw;
	max-width: 1024px;
	padding: 2rem 0 2rem 0;
	margin:0;
	text-align: center;
}

#team-view_section_heading1{
	margin-bottom: 1rem;
}

.my-team_div{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 2rem;
}


#spare-player_div_h3{
	margin-top:2rem;
	margin-left: auto;
	margin-right: auto;
	padding: 2rem;
	border-top: 0.5px solid var(--ligthgrey);
	width:15rem;
}

/* Kod för mellanstor skärm */

@media screen and (min-width: 768px) and (max-width:1023px) {
	.my-team_div{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto;
		gap: 1rem;
		max-width: 600px;
		margin: 0 auto;
	}

	#my-team_div_h3-container{
		grid-column: 1/4;
	}
	
	.spare-player_div{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto;
		gap: 1.4rem;
		max-width: 600px;
		margin: 0 auto;
	}
	
	#spare-player_div_h3{
		grid-column: 1/4;
		margin-top:2rem;
		margin-left: auto;
		margin-right: auto;
		padding: 2rem;
		border-top: 0.5px solid var(--ligthgrey);
		width:35rem;
	}
}

/* Kod för stor skärm */

@media screen and (min-width: 1024px) {
	.my-team_div{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto;
		gap: 1rem;
		max-width: 800px;
		margin: 0 auto;
	}

	#my-team_div_h3-container{
		grid-column: 1/4;
	}
	
	.spare-player_div{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-template-rows: auto;
		gap: 1.4rem;
		max-width: 800px;
		margin: 0 auto;
	}
	
	#spare-player_div_h3{
		grid-column: 1/5;
		margin-top:2rem;
		margin-left: auto;
		margin-right: auto;
		padding: 2rem;
		border-top: 0.5px solid var(--ligthgrey);
		width:45rem;
	}
}