.basic-grid {
 display: grid;
 gap: 1rem;
 grid-template-columns: repeat(5, 1fr);
 grid-template-columns: repeat(5, minimax(360px, 1fr));
 grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.card1 {
height: 150px;
width: 150px;
display: flex;
background-color: grey;
font-size: 3rem;
border-radius: 4px;
transition :all 500ms;
overflow: hidden;

}

.card2 {
height: 150px;
width: 150px;
display: flex;
background-color: yellow;
font-size: 3rem;
border-radius: 4px;
transition :all 500ms;
overflow: hidden;

}

.card3 {
height: 150px;
width: 150px;
display: flex;
background-color: purple;
font-size: 3rem;
border-radius: 4px;
transition :all 500ms;
overflow: hidden;

}

.card4 {
height: 150px;
width: 150px;
display: flex;
background-color: orange;
font-size: 3rem;
border-radius: 4px;
transition :all 500ms;
overflow: hidden;

}

.card5 {
height: 150px;
width: 150px;
display: flex;
background-color: green;
font-size: 3rem;
border-radius: 4px;
transition :all 500ms;
overflow: hidden;

}

.main-column {
	flex: 2;
	order: 2;
}

.sidebar-one {
	flex: 1;
	order: 1;
    font-size: 10px;
}

.sidebar-two {
	flex: 1;
	order: 3;
    font-size: 10px;

}