<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>style_opacity_flex_text_node_vs_nested_container</title>
<link rel="stylesheet" href="../shared.css" />
</head>
<body style="width: 1200px; height: 630px">
<div
style="
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
row-gap: 48px;
column-gap: 48px;
background-color: rgb(255, 255, 255);
"
>
<span
style="
display: flex;
width: 300px;
height: 220px;
align-items: center;
justify-content: center;
font-size: 120px;
font-weight: 700;
color: rgb(0, 0, 0);
opacity: 0.5;
background-color: rgb(240, 240, 240);
"
>A</span
>
<div
style="
display: flex;
width: 300px;
height: 220px;
align-items: center;
justify-content: center;
opacity: 0.5;
background-color: rgb(240, 240, 240);
"
>
<span style="display: block; font-size: 120px; font-weight: 700; color: rgb(0, 0, 0)"
>A</span
>
</div>
</div>
</body>
</html>