import React from "react";
import "./Banner_alert.css";

export default function Banner_alert() {
	return (
		<section className="EadGraduacao">
			<h3 className="heading3">Anatomia</h3>
			<h4 className="heading4 margin-0">banner-alert--fill</h4>
			<div className="banner-alert--fill background-blue-100">
				<p className="paragraph--medium margin-0">
					Oba, você leu com sucesso esta importante mensagem de alerta. Este
					texto de exemplo vai ser um pouco mais longo para que você possa ver
					como o espaçamento dentro de um alerta funciona com este tipo de
					conteúdo.
				</p>
			</div>
			<h4 className="heading4 margin-0">banner-alert--fill__icon</h4>
			<div className="banner-alert--fill__icon background-blue-100">
				<div className="icon-size-md">
					<svg
						width="25"
						height="25"
						viewBox="0 0 25 25"
						fill="none"
						xmlns="http://www.w3.org/2000/svg">
						<path
							d="M22.9231 9.61812C22.8294 9.32986 22.6524 9.0758 22.4145 8.88795C22.1766 8.7001 21.8884 8.58686 21.5863 8.56249L16.055 8.11624L13.9194 2.95155C13.8039 2.67013 13.6073 2.42941 13.3547 2.26C13.102 2.09058 12.8047 2.00012 12.5005 2.00012C12.1963 2.00012 11.8989 2.09058 11.6463 2.26C11.3936 2.42941 11.1971 2.67013 11.0816 2.95155L8.94781 8.11531L3.41375 8.56249C3.11111 8.58809 2.82274 8.70243 2.58479 8.89119C2.34684 9.07994 2.16988 9.33472 2.07609 9.62361C1.9823 9.91249 1.97584 10.2226 2.05753 10.5152C2.13922 10.8077 2.30542 11.0696 2.53531 11.2681L6.75406 14.9084L5.46875 20.3516C5.39687 20.6473 5.41447 20.9577 5.51932 21.2434C5.62417 21.5291 5.81154 21.7771 6.05765 21.9562C6.30376 22.1352 6.59751 22.237 6.9016 22.2488C7.2057 22.2605 7.50643 22.1817 7.76563 22.0222L12.5 19.1084L17.2372 22.0222C17.4965 22.1798 17.7966 22.2571 18.0997 22.2445C18.4029 22.2318 18.6955 22.1298 18.9408 21.9512C19.1861 21.7726 19.373 21.5254 19.4781 21.2407C19.5832 20.9561 19.6017 20.6467 19.5313 20.3516L18.2413 14.9075L22.46 11.2672C22.6918 11.069 22.8595 10.8065 22.9419 10.513C23.0244 10.2194 23.0178 9.90796 22.9231 9.61812ZM21.485 10.1309L16.9194 14.0684C16.8153 14.1582 16.7378 14.2748 16.6955 14.4056C16.6532 14.5364 16.6476 14.6763 16.6794 14.81L18.0744 20.6975C18.078 20.7056 18.0783 20.7148 18.0754 20.7232C18.0724 20.7315 18.0664 20.7385 18.0584 20.7425C18.0416 20.7556 18.0369 20.7528 18.0228 20.7425L12.8928 17.5878C12.7747 17.5152 12.6387 17.4767 12.5 17.4767C12.3613 17.4767 12.2253 17.5152 12.1072 17.5878L6.97719 20.7444C6.96313 20.7528 6.95938 20.7556 6.94156 20.7444C6.93365 20.7403 6.92759 20.7334 6.92462 20.725C6.92166 20.7167 6.92202 20.7075 6.92563 20.6994L8.32063 14.8119C8.35242 14.6781 8.34685 14.5382 8.30452 14.4075C8.2622 14.2767 8.18475 14.16 8.08063 14.0703L3.515 10.1328C3.50375 10.1234 3.49344 10.115 3.50281 10.0859C3.51219 10.0569 3.51969 10.0606 3.53375 10.0587L9.52625 9.57499C9.6637 9.5632 9.79523 9.51373 9.90638 9.43203C10.0175 9.35032 10.104 9.23954 10.1563 9.11187L12.4644 3.52343C12.4719 3.50749 12.4747 3.49999 12.4972 3.49999C12.5197 3.49999 12.5225 3.50749 12.53 3.52343L14.8438 9.11187C14.8965 9.23958 14.9835 9.35025 15.0952 9.43164C15.2068 9.51303 15.3388 9.56199 15.4766 9.57312L21.4691 10.0569C21.4831 10.0569 21.4916 10.0569 21.5 10.0841C21.5084 10.1112 21.5 10.1216 21.485 10.1309Z"
							fill="#1529FF"
						/>
					</svg>
				</div>
				<div className="banner-alert__content">
					<p className="paragraph--medium margin-0">
						Oba, você leu com sucesso esta importante mensagem de alerta. Este
						texto de exemplo vai ser um pouco mais longo para que você possa ver
						como o espaçamento dentro de um alerta funciona com este tipo de
						conteúdo.
					</p>
				</div>
			</div>
			<h4 className="heading4 margin-0">banner-alert--stroke</h4>
			<div className="banner-alert--stroke border-color-blue-600">
				<p className="paragraph--medium margin-0">
					Oba, você leu com sucesso esta importante mensagem de alerta. Este
					texto de exemplo vai ser um pouco mais longo para que você possa ver
					como o espaçamento dentro de um alerta funciona com este tipo de
					conteúdo.
				</p>
			</div>
			<h4 className="heading4 margin-0">banner-alert--stroke__icon</h4>
			<div className="banner-alert--stroke__icon border-color-blue-600">
				<div className="icon-size-md">
					<svg
						width="25"
						height="25"
						viewBox="0 0 25 25"
						fill="none"
						xmlns="http://www.w3.org/2000/svg">
						<path
							d="M22.9231 9.61812C22.8294 9.32986 22.6524 9.0758 22.4145 8.88795C22.1766 8.7001 21.8884 8.58686 21.5863 8.56249L16.055 8.11624L13.9194 2.95155C13.8039 2.67013 13.6073 2.42941 13.3547 2.26C13.102 2.09058 12.8047 2.00012 12.5005 2.00012C12.1963 2.00012 11.8989 2.09058 11.6463 2.26C11.3936 2.42941 11.1971 2.67013 11.0816 2.95155L8.94781 8.11531L3.41375 8.56249C3.11111 8.58809 2.82274 8.70243 2.58479 8.89119C2.34684 9.07994 2.16988 9.33472 2.07609 9.62361C1.9823 9.91249 1.97584 10.2226 2.05753 10.5152C2.13922 10.8077 2.30542 11.0696 2.53531 11.2681L6.75406 14.9084L5.46875 20.3516C5.39687 20.6473 5.41447 20.9577 5.51932 21.2434C5.62417 21.5291 5.81154 21.7771 6.05765 21.9562C6.30376 22.1352 6.59751 22.237 6.9016 22.2488C7.2057 22.2605 7.50643 22.1817 7.76563 22.0222L12.5 19.1084L17.2372 22.0222C17.4965 22.1798 17.7966 22.2571 18.0997 22.2445C18.4029 22.2318 18.6955 22.1298 18.9408 21.9512C19.1861 21.7726 19.373 21.5254 19.4781 21.2407C19.5832 20.9561 19.6017 20.6467 19.5313 20.3516L18.2413 14.9075L22.46 11.2672C22.6918 11.069 22.8595 10.8065 22.9419 10.513C23.0244 10.2194 23.0178 9.90796 22.9231 9.61812ZM21.485 10.1309L16.9194 14.0684C16.8153 14.1582 16.7378 14.2748 16.6955 14.4056C16.6532 14.5364 16.6476 14.6763 16.6794 14.81L18.0744 20.6975C18.078 20.7056 18.0783 20.7148 18.0754 20.7232C18.0724 20.7315 18.0664 20.7385 18.0584 20.7425C18.0416 20.7556 18.0369 20.7528 18.0228 20.7425L12.8928 17.5878C12.7747 17.5152 12.6387 17.4767 12.5 17.4767C12.3613 17.4767 12.2253 17.5152 12.1072 17.5878L6.97719 20.7444C6.96313 20.7528 6.95938 20.7556 6.94156 20.7444C6.93365 20.7403 6.92759 20.7334 6.92462 20.725C6.92166 20.7167 6.92202 20.7075 6.92563 20.6994L8.32063 14.8119C8.35242 14.6781 8.34685 14.5382 8.30452 14.4075C8.2622 14.2767 8.18475 14.16 8.08063 14.0703L3.515 10.1328C3.50375 10.1234 3.49344 10.115 3.50281 10.0859C3.51219 10.0569 3.51969 10.0606 3.53375 10.0587L9.52625 9.57499C9.6637 9.5632 9.79523 9.51373 9.90638 9.43203C10.0175 9.35032 10.104 9.23954 10.1563 9.11187L12.4644 3.52343C12.4719 3.50749 12.4747 3.49999 12.4972 3.49999C12.5197 3.49999 12.5225 3.50749 12.53 3.52343L14.8438 9.11187C14.8965 9.23958 14.9835 9.35025 15.0952 9.43164C15.2068 9.51303 15.3388 9.56199 15.4766 9.57312L21.4691 10.0569C21.4831 10.0569 21.4916 10.0569 21.5 10.0841C21.5084 10.1112 21.5 10.1216 21.485 10.1309Z"
							fill="#1529FF"
						/>
					</svg>
				</div>
				<div className="banner-alert__content">
					<p className="paragraph--medium margin-0">
						Oba, você leu com sucesso esta importante mensagem de alerta. Este
						texto de exemplo vai ser um pouco mais longo para que você possa ver
						como o espaçamento dentro de um alerta funciona com este tipo de
						conteúdo.
					</p>
				</div>
			</div>
			<h4 className="heading4 margin-0">banner-alert--fill Heading </h4>
			<div className="banner-alert--fill background-blue-100">
				<h4 className="heading4 margin-0">banner-alert--fill Heading</h4>
				<p className="paragraph--medium margin-0">
					Oba, você leu com sucesso esta importante mensagem de alerta. Este
					texto de exemplo vai ser um pouco mais longo para que você possa ver
					como o espaçamento dentro de um alerta funciona com este tipo de
					conteúdo.
				</p>
			</div>
			<h4 className="heading4 margin-0">banner-alert--fill__icon Heading</h4>
			<div className="banner-alert--fill__icon background-blue-100">
				<div className="icon-size-md">
					<svg
						width="25"
						height="25"
						viewBox="0 0 25 25"
						fill="none"
						xmlns="http://www.w3.org/2000/svg">
						<path
							d="M22.9231 9.61812C22.8294 9.32986 22.6524 9.0758 22.4145 8.88795C22.1766 8.7001 21.8884 8.58686 21.5863 8.56249L16.055 8.11624L13.9194 2.95155C13.8039 2.67013 13.6073 2.42941 13.3547 2.26C13.102 2.09058 12.8047 2.00012 12.5005 2.00012C12.1963 2.00012 11.8989 2.09058 11.6463 2.26C11.3936 2.42941 11.1971 2.67013 11.0816 2.95155L8.94781 8.11531L3.41375 8.56249C3.11111 8.58809 2.82274 8.70243 2.58479 8.89119C2.34684 9.07994 2.16988 9.33472 2.07609 9.62361C1.9823 9.91249 1.97584 10.2226 2.05753 10.5152C2.13922 10.8077 2.30542 11.0696 2.53531 11.2681L6.75406 14.9084L5.46875 20.3516C5.39687 20.6473 5.41447 20.9577 5.51932 21.2434C5.62417 21.5291 5.81154 21.7771 6.05765 21.9562C6.30376 22.1352 6.59751 22.237 6.9016 22.2488C7.2057 22.2605 7.50643 22.1817 7.76563 22.0222L12.5 19.1084L17.2372 22.0222C17.4965 22.1798 17.7966 22.2571 18.0997 22.2445C18.4029 22.2318 18.6955 22.1298 18.9408 21.9512C19.1861 21.7726 19.373 21.5254 19.4781 21.2407C19.5832 20.9561 19.6017 20.6467 19.5313 20.3516L18.2413 14.9075L22.46 11.2672C22.6918 11.069 22.8595 10.8065 22.9419 10.513C23.0244 10.2194 23.0178 9.90796 22.9231 9.61812ZM21.485 10.1309L16.9194 14.0684C16.8153 14.1582 16.7378 14.2748 16.6955 14.4056C16.6532 14.5364 16.6476 14.6763 16.6794 14.81L18.0744 20.6975C18.078 20.7056 18.0783 20.7148 18.0754 20.7232C18.0724 20.7315 18.0664 20.7385 18.0584 20.7425C18.0416 20.7556 18.0369 20.7528 18.0228 20.7425L12.8928 17.5878C12.7747 17.5152 12.6387 17.4767 12.5 17.4767C12.3613 17.4767 12.2253 17.5152 12.1072 17.5878L6.97719 20.7444C6.96313 20.7528 6.95938 20.7556 6.94156 20.7444C6.93365 20.7403 6.92759 20.7334 6.92462 20.725C6.92166 20.7167 6.92202 20.7075 6.92563 20.6994L8.32063 14.8119C8.35242 14.6781 8.34685 14.5382 8.30452 14.4075C8.2622 14.2767 8.18475 14.16 8.08063 14.0703L3.515 10.1328C3.50375 10.1234 3.49344 10.115 3.50281 10.0859C3.51219 10.0569 3.51969 10.0606 3.53375 10.0587L9.52625 9.57499C9.6637 9.5632 9.79523 9.51373 9.90638 9.43203C10.0175 9.35032 10.104 9.23954 10.1563 9.11187L12.4644 3.52343C12.4719 3.50749 12.4747 3.49999 12.4972 3.49999C12.5197 3.49999 12.5225 3.50749 12.53 3.52343L14.8438 9.11187C14.8965 9.23958 14.9835 9.35025 15.0952 9.43164C15.2068 9.51303 15.3388 9.56199 15.4766 9.57312L21.4691 10.0569C21.4831 10.0569 21.4916 10.0569 21.5 10.0841C21.5084 10.1112 21.5 10.1216 21.485 10.1309Z"
							fill="#1529FF"
						/>
					</svg>
				</div>
				<div className="banner-alert__content">
					<h4 className="heading4 margin-0">
						banner-alert--fill__icon Heading
					</h4>
					<p className="paragraph--medium margin-0">
						Oba, você leu com sucesso esta importante mensagem de alerta. Este
						texto de exemplo vai ser um pouco mais longo para que você possa ver
						como o espaçamento dentro de um alerta funciona com este tipo de
						conteúdo.
					</p>
				</div>
			</div>
			<h4 className="heading4 margin-0">banner-alert--stroke Heading </h4>
			<div className="banner-alert--stroke border-color-blue-600">
				<h4 className="heading4 margin-0 text-blue-600">
					banner-alert--stroke Heading
				</h4>
				<p className="paragraph--medium margin-0">
					Oba, você leu com sucesso esta importante mensagem de alerta. Este
					texto de exemplo vai ser um pouco mais longo para que você possa ver
					como o espaçamento dentro de um alerta funciona com este tipo de
					conteúdo.
				</p>
			</div>
			<h4 className="heading4 margin-0">banner-alert--stroke__icon</h4>
			<div className="banner-alert--stroke__icon border-color-blue-600">
				<div className="icon-size-md">
					<svg
						width="25"
						height="25"
						viewBox="0 0 25 25"
						fill="none"
						xmlns="http://www.w3.org/2000/svg">
						<path
							d="M22.9231 9.61812C22.8294 9.32986 22.6524 9.0758 22.4145 8.88795C22.1766 8.7001 21.8884 8.58686 21.5863 8.56249L16.055 8.11624L13.9194 2.95155C13.8039 2.67013 13.6073 2.42941 13.3547 2.26C13.102 2.09058 12.8047 2.00012 12.5005 2.00012C12.1963 2.00012 11.8989 2.09058 11.6463 2.26C11.3936 2.42941 11.1971 2.67013 11.0816 2.95155L8.94781 8.11531L3.41375 8.56249C3.11111 8.58809 2.82274 8.70243 2.58479 8.89119C2.34684 9.07994 2.16988 9.33472 2.07609 9.62361C1.9823 9.91249 1.97584 10.2226 2.05753 10.5152C2.13922 10.8077 2.30542 11.0696 2.53531 11.2681L6.75406 14.9084L5.46875 20.3516C5.39687 20.6473 5.41447 20.9577 5.51932 21.2434C5.62417 21.5291 5.81154 21.7771 6.05765 21.9562C6.30376 22.1352 6.59751 22.237 6.9016 22.2488C7.2057 22.2605 7.50643 22.1817 7.76563 22.0222L12.5 19.1084L17.2372 22.0222C17.4965 22.1798 17.7966 22.2571 18.0997 22.2445C18.4029 22.2318 18.6955 22.1298 18.9408 21.9512C19.1861 21.7726 19.373 21.5254 19.4781 21.2407C19.5832 20.9561 19.6017 20.6467 19.5313 20.3516L18.2413 14.9075L22.46 11.2672C22.6918 11.069 22.8595 10.8065 22.9419 10.513C23.0244 10.2194 23.0178 9.90796 22.9231 9.61812ZM21.485 10.1309L16.9194 14.0684C16.8153 14.1582 16.7378 14.2748 16.6955 14.4056C16.6532 14.5364 16.6476 14.6763 16.6794 14.81L18.0744 20.6975C18.078 20.7056 18.0783 20.7148 18.0754 20.7232C18.0724 20.7315 18.0664 20.7385 18.0584 20.7425C18.0416 20.7556 18.0369 20.7528 18.0228 20.7425L12.8928 17.5878C12.7747 17.5152 12.6387 17.4767 12.5 17.4767C12.3613 17.4767 12.2253 17.5152 12.1072 17.5878L6.97719 20.7444C6.96313 20.7528 6.95938 20.7556 6.94156 20.7444C6.93365 20.7403 6.92759 20.7334 6.92462 20.725C6.92166 20.7167 6.92202 20.7075 6.92563 20.6994L8.32063 14.8119C8.35242 14.6781 8.34685 14.5382 8.30452 14.4075C8.2622 14.2767 8.18475 14.16 8.08063 14.0703L3.515 10.1328C3.50375 10.1234 3.49344 10.115 3.50281 10.0859C3.51219 10.0569 3.51969 10.0606 3.53375 10.0587L9.52625 9.57499C9.6637 9.5632 9.79523 9.51373 9.90638 9.43203C10.0175 9.35032 10.104 9.23954 10.1563 9.11187L12.4644 3.52343C12.4719 3.50749 12.4747 3.49999 12.4972 3.49999C12.5197 3.49999 12.5225 3.50749 12.53 3.52343L14.8438 9.11187C14.8965 9.23958 14.9835 9.35025 15.0952 9.43164C15.2068 9.51303 15.3388 9.56199 15.4766 9.57312L21.4691 10.0569C21.4831 10.0569 21.4916 10.0569 21.5 10.0841C21.5084 10.1112 21.5 10.1216 21.485 10.1309Z"
							fill="#1529FF"
						/>
					</svg>
				</div>
				<div className="banner-alert__content">
					<h4 className="heading4 margin-0 text-blue-600">
						banner-alert--stroke__icon Heading
					</h4>
					<p className="paragraph--medium margin-0">
						Oba, você leu com sucesso esta importante mensagem de alerta. Este
						texto de exemplo vai ser um pouco mais longo para que você possa ver
						como o espaçamento dentro de um alerta funciona com este tipo de
						conteúdo.
					</p>
				</div>
			</div>
		</section>
	);
}