#heroes{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	max-width: 1200px;
	margin: 0 auto;
}
#heroes a{
	width: 280px;
	text-decoration: none;
}

#heroes a img{
	width: 100%;
	height: 384px;
	object-fit: cover;
}
#heroes a h5{
	max-width: 180px;
	margin: 0;
	padding: 16px 0; 
	color: #ffffff;
	font-size: 26px;
	font-family: 'TildaSans',Arial,sans-serif;
	line-height: 1.1;
	font-weight: 500;
}
#heroes a p{
    display: flex;
    margin: 0;
    padding-bottom: 32px;
    color: #7d9aff;
    font-size: 20px;
    font-family: 'TildaSans',Arial,sans-serif;
    line-height: 1.2;
    font-weight: 400;
}


#detailed_information{
    display: flex;
    margin: 50px auto;
    width: 1100px;
    gap: 30px;
    color: #fff;
}
#detailed_information img{
    width: 445px;
    height: 100%;
}

#detailed_information h2{
    font-size: 32px;
    font-family: 'TildaSans',Arial,sans-serif;
    line-height: 1.1;
    font-weight: 700;
}
#detailed_information p{
    margin-top: 25px;
    color: #ffffff;
    font-size: 20px;
    font-family: 'TildaSans',Arial,sans-serif;
    line-height: 26px;
    font-weight: 400;
}
#detailed_information a{
    margin-top: 20px;
    display: flex;
    color: #7d9aff;
    font-size: 20px;
    font-family: 'TildaSans',Arial,sans-serif;
    line-height: 26px;
    font-weight: 400;
}


@media(max-width: 1199px){
	#heroes{
		max-width: 960px;
		gap: 8px;
	}
	#heroes a{
		width: 234px;
	}
	#heroes a img{
		height: 312px;
	}
	
	#detailed_information{
	    width: 960px;
	}
	#detailed_information img{
        width: 380px;
	}
}

@media (max-width: 976px){
	#heroes{
		max-width: 510px;
		gap: 40px;
	}
}

@media (max-width: 976px){
    #detailed_information{
        flex-direction: column;
        width: 458px;
    }
    #detailed_information img{
        width: 100%;
    }
}
@media (max-width: 639px){
	#heroes{
		max-width: 440px;
		gap: 8px;
	}
	#heroes a{
		width: 214px;
	}
	#heroes a img{
		height: 285px;
	}
}
@media (max-width: 479px) {
	#heroes{
		max-width: 90%;
	}
	#heroes a{
		width: 48%;
	}
	#heroes a img{
		height: 56vw;
	}
	#heroes a h5 {
		font-size: 17px;
	}
	#heroes a p{
	    font-size: 14px;
	}
	#heroes a p svg{
		width: 16px;
    	height: 16px;
	}
	
    #detailed_information{
        width: 297px;
    }
    #detailed_information h2{
        font-size: 28px;
    }
    #detailed_information p{
        font-size: 16px;
    }
}