/* Estrutura Base */ .CardsColumns{ display: flex; flex-direction: row; flex-wrap: wrap; margin-left: auto; margin-right: auto; justify-content: center; } .IntroCardOrigem { position: relative; float:left; min-height: 560px; width: 200px; color: #2b282c; margin: 15px 15px 15px 0; } .IntroCardOrigem:hover{ transform: scale(1.05); } *, :after, :before { box-sizing: border-box; } div { display: block; } .IntroCardOrigem:before { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #cecbc5; border-radius: 15px; border: 1px solid #897051; } .OutlineFrameOrigem { position: relative; min-height: 560px; } .IntroCardOrigem-content { position: relative; min-height: 560px; /*text-align: center;*/ } .topleft{ position: absolute; bottom: 5px; left: 15px; font-size: 18px; color: #FFF; padding: 5px; background: #897051; } .topleft a { color: #A88541; } .topleft a:hover { color: #FFF; } @media (min-width: 1024px) { .IntroCard-figure { position: relative; overflow: hidden; } } .IntroCardOrigem-figure { position: relative; width: 100%; overflow: hidden; height: 225px; } .IntroCardOrigem-figure{ margin: 0; } @media (min-width: 1024px) { .IntroCardOrigem-figure:before { content: ""; display: block; padding-top: 0; } } .IntroCardOrigem-figure:before { content: ""; display: block; padding-top: 0; } .IntroCardOrigem-image { height: 100%; width: 100%; position: absolute; top: 0; left: 0; object-fit: cover; object-position: 50% 0; } .IntroCardOrigem-image img { border-style: none; border-radius: 15px 15px 0 0; } .IntroCardOrigem-figure:after { content: ""; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 40%; } /* Borda Personalizada */ .OutlineFrameOrigem .OutlineFrame-ext { overflow: hidden; position: absolute; top: 0.5rem; bottom: 0.5rem; left: 0.5rem; right: 0.5rem; color: #99664d; font-size: 2rem; pointer-events: none; } .OutlineFrameOrigem .OutlineFrame-ext:before { position: absolute; top: 1em; bottom: 0; left: 0; right: 0; border: 1px solid; border-top: none; content: ""; } .OutlineFrameOrigem .OutlineFrame-circles { position: absolute; height: 1em; top: 0; left: 0; right: 0; } .OutlineFrameOrigem .OutlineFrame-circles:before { left: 0.2em; } .OutlineFrameOrigem .OutlineFrame-circles:before, .OutlineFrameOrigem .OutlineFrame-circles:after { position: absolute; height: 0.15em; width: 0.15em; top: 0.25em; border-radius: 50%; border: 1px solid #99664d; content: ""; } .OutlineFrameOrigem .OutlineFrame-circles:after { right: 0.2em; } .OutlineFrameOrigem .OutlineFrame-cutOuts { display: block; height: 1em; position: relative; overflow: hidden; } .OutlineFrameOrigem .OutlineFrame-cutOuts:before { left: -1em; } .OutlineFrameOrigem .OutlineFrame-cutOuts:before, .OutlineFrameOrigem .OutlineFrame-cutOuts:after { position: absolute; top: -1em; height: 2em; width: 2em; border: 1px solid; border-radius: 50%; content: ""; } .OutlineFrameOrigem .OutlineFrame-cutOuts:after { right: -1em; } .OutlineFrameOrigem .OutlineFrame-topCut { position: absolute; top: 0; left: 1em; right: 1em; height: 1em; color: #99664d; overflow: hidden; } .OutlineFrameOrigem .OutlineFrame-topCut:before { left: 0; } .OutlineFrameOrigem .OutlineFrame-topCut:before, .OutlineFrameOrigem .OutlineFrame-topCut:after { position: absolute; background: currentColor; height: 0.1rem; width: calc(50% - 0.25em); content: ""; } .OutlineFrameOrigem .OutlineFrame-topCut:after { right: 0; } .OutlineFrameOrigem .OutlineFrame-cut { position: absolute; top: -0.2em; left: 50%; transform: translateX(-50%); display: block; width: 0.4em; height: 0.4em; } .OutlineFrameOrigem .OutlineFrame-cut:before { position: absolute; top: 0; bottom: 0; left: 0; right: 0; border: 1px solid; transform: rotate(45deg); content: ""; } .OutlineFrameOrigem .OutlineFrame-ext.isDark { top: 0.85rem; bottom: 0.55rem; left: 0.85rem; right: 0.85rem; color: #68482c; font-size: 1.1rem; } .OutlineFrameOrigem .OutlineFrame-ext.isDark:after { position: absolute; top: 0; bottom: 0; left: 1em; right: 1em; border-top: 1px solid; content: ""; } /* Conteúdo do Card */ .IntroCard-wrapper { position: relative; padding: 0.5rem 0.95rem 0.5rem; } @media (min-width: 1024px) { .IntroCard-title { font-size: 2.2rem; } } .IntroCard-title { padding: 0 5px 0 5px; margin: 0 0 0 0; font-size: 20px; } #ClassName{ border-bottom: 2px solid #68482c; margin-top: 0px; margin-bottom: 0px; } #lore-separador{ padding:10px; min-height:125px; border-top: 2px solid #68482c; border-bottom: 2px solid #68482c; background: rgba(137, 112, 81, 0.3);; } #lore{ font-style:italic; font-size:14px; margin: 0; text-align: left; } #lore:first-letter{ font-size:18px; font-weight:bold; color: #897051; } /* Tabela interna */ .OutlineFrameOrigem table { margin: 15px 0 0 0; width: 435px; background: linear-gradient(rgba(206,203,197,0.9), rgba(206,203,197,.9)); background-position: center; background-repeat: no-repeat; background-size: contain; } .OutlineFrameOrigem td { text-align: left; vertical-align: top; padding: 0 0 0 10px; } #titulo{ font-weight:bold; width:140px; } #titulo_traco{ color:#897051; font-weight:bold; font-size:17px; } #traco_origem{ font-style:italic; font-size:14px; margin: 5px; text-align: left; }