@import url("font.css");

*
{
margin: 0;
padding: 0;
}

body
{
/*min-height: 100dvh;*/
display: flex;
align-items: ;
justify-content: center;
padding: 2%;
}

.item_2
{
/*padding: 2em;*/
background-color: rgb(0, 81, 255);
color: red;
font-family: "font_03";
/*text-align: center;*/
border-radius: 8px;
font-size: 1.2rem;
}

.grid-container
{
display: grid;
/*grid-template-columns: 200px 200px 200px;*/
/*grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));*/
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 200px;
gap: 1em;
grid-template-areas: 
"box-1 box-2 box-3"
"box-4 box-5 box-5";
}

@media(max-width: 1200px)
{
.grid-container
{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 200px 200px;
gap: 1em;
grid-template-areas: 
"box-1 box-2 box-2"
"box-3 box-3 box-3"
"box-4 box-5 box-5";
}

.item_2
{
/*padding: 2em;*/
background-color: rgb(0, 81, 255);
color: red;
font-family: "font_03";
/*text-align: center;*/
border-radius: 8px;
font-size: 1rem;
}
}

@media(max-width: 600px)
{
.grid-container
{
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 200px 200px;
gap: 1em;
grid-template-areas: 
"box-1 box-2 box-2"
"box-3 box-3 box-3"
"box-4 box-4 box-5";
}

.item_2
{
/*padding: 2em;*/
background-color: rgb(0, 81, 255);
color: red;
font-family: "font_03";
/*text-align: center;*/
border-radius: 8px;
font-size: 0.9rem;
}
}

.item
{
/*padding: 2em;*/
background-color: rgb(0, 255, 85);
color: red;
/*text-align: center;*/
border-radius: 8px;
font-size: 1rem;
}


.item_3
{
/*padding: 2em;*/
background-color: rgb(249, 170, 218);
color: rgb(23, 7, 7);
font-family: "font_03";
/*text-align: center;*/
border-radius: 8px;
font-size: 1rem;
}