html :where(img) { height: auto; max-width: initial; }
.hero { height: auto; overflow: hidden; background-image: url("../images/financiamento-bndes/pattern-bg.png"); background-position: top left; background-repeat: no-repeat; background-size: contain; position: relative; }
.hero__image { width: 55%; height: 100%; position: absolute; top: 0; right: 0; background: url("../images/financiamento-bndes/hero-image.png"); background-size: cover; background-position: bottom right; background-repeat: no-repeat; clip-path: polygon(400px 0, 100% 0%, 100% 100%, 0% 100%); }
.hero__image::after { content: ''; display: block; width: 45px; height: 130%; background: var(--t-vertical-gradient); position: absolute; top: -90px; left: 185px; transform: rotate(34deg); }
.hero__description { padding-bottom: 186px; width: 50%; }
.hero__description .t-breadcrumbs, .hero__description .t-breadcrumbs a, .hero__description .t-breadcrumbs .breadcrumb_last { color: var(--t-blue); }
.hero__description .t-breadcrumbs a:hover { color: var(--t-blue) !important; opacity: 0.8; text-decoration: underline; }
.hero__description h1::after { display: block; content: ''; width: 150%; height: 2px; background: var(--t-green); }
.hero__description h1 { font-size: 3rem; font-weight: bold; }
.hero__description p { font-size: 1.5rem; }
.hero__description img { position: relative; top: -8px; }
.tarja h2 { font-weight: 400; line-height: 1.4em; font-size: 1.5em; }
.modalidades h2 { font-size: 2.5rem; font-weight: 900; }
.modalidades h3 { font-size: 1.5rem; font-weight: 400; }
.modalidades h4 { font-size: 1.5rem; font-weight: 900; }
.modalidades p { font-size: 1rem; } 
.modalidade-item { border: 2px solid var(--t-blue); border-radius: 10px; min-height: 300px}
.vantagens h2 { color: #636366; font-size: 24px}

@media (max-width: 768px) { 
	.hero { height: auto; margin-bottom: 30px; }
	.hero .t-breadcrumbs { margin-bottom: 30px; }
	.hero__description { padding-bottom: 50px; width: 100%; }
	.hero__image { display: none; }
}

@media (max-width: 370px) { 
	.hero__description { padding: 0 15px; }
}

@media only screen and (min-width: 1024px) and (max-width: 1440px){ 
	.hero .t-breadcrumbs { margin-bottom: 40px; }
	.hero__description { padding-bottom: 40px; }
	.hero__description h1 { font-size: 2rem; }
	.hero__description p { font-size: 1rem; }
	.hero__image { clip-path: polygon(200px 0, 100% 0%, 100% 100%, 0% 100%); }
	.hero__image::after { top: -60px; left: 60px; transform: rotate(36deg); height: 400px; }
}

@media only screen and (min-width: 1024px) and (max-width: 1440px){ 
	.modalidades h2 { font-size: 2rem; }
	.modalidades h3 { font-size: 1.2rem; }
}