@import url("font.css");

*
{
margin: 0;
padding: 0;
}

body
{
/*min-height: 100dvh;*/
display: flex;
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;

    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.dragon 
{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    height: 100%;
}

.img 
{
    max-width: 100%;
    max-height: calc(100% - 25px);
    object-fit: contain;
    display: block;
}

.image-container 
{
    flex: 1;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    overflow: hidden;
}

.box-title 
{
flex-shrink: 0;
font-family: "font_03";
}

.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;
}