.gabrielbywally {width: 300px; height: 260px; margin: 8px auto; background-image: url(https://i.imgur.com/09v086F.png); border: 8px solid #000; outline: 1px solid #3f3f3f; display: flex; align-items: center; justify-content: flex-start; padding: 15px; box-sizing: border-box;} .gabrielbywally>.gbwquote {display: block; width: 90px; max-height: 200px; background: #000000b8; padding: 10px; border: 1px solid #3f3f3f; font: 400 10px/13px var(--fuente1); text-transform: uppercase; text-align: justify; text-align-last: left; color: #fff; letter-spacing: .5px;} .gabrielbywally>.gbwquote>strong, .gabrielbywally>.gbwquote>i {color: #59946f;}

.dragobywally {width: 276px; height: 230px; background: #000; margin: 8px auto; outline: 1px solid #a2e429; border: 5px solid #000; position: relative; overflow: hidden; display: flex; align-items: center; flex-wrap: wrap;} .dragobywally:after {content: ''; position: absolute; width: 100%; height: 100%; background-image: url(https://i.imgur.com/bDfezRb.gif); top: 0; left: 0; transition: all 1s; transition-delay: .8s;} .dragobywally>.dragoone {font: 700 80px var(--fuente4); position: relative; z-index: 2; background: var(--dragini-lg); -webkit-background-clip: text; -webkit-text-fill-color: transparent; --dragini-lg: linear-gradient(180deg, #b2d374, #3a5a20); text-align: center; margin: 0 auto; text-transform: uppercase; margin-top: 40px; left: -10px; opacity: 0; transition: all 1s; transition-delay: .5s;} .dragobywally>span {display: block; color: #fff; font: 700 8px var(--fuente5); position: relative; z-index: 2; text-transform: uppercase; letter-spacing: 1px; background: #000; width: 80%; margin: 0 auto; margin-top: -80px; padding: 5px; left: 20px; opacity: 0; transition: all 1s; transition-delay: 0s;} .dragobywally:hover:after {filter: grayscale(1); opacity: .5; transition: all 1s; transition-delay: 0s;} .dragobywally:hover>.dragoone {opacity: 1; left: 0; transition: all 1s; transition-delay: .5s;} .dragobywally:hover>span {opacity: 1; left: 0; transition: all 1s; transition-delay: .8s;}

.mariebywally {width: 326px; height: 233px; position: relative; background: #000; margin: 8px auto; box-shadow: 0px 5px 10px 0px rgba(189,0,285,0.7); display: flex; align-items: center; justify-content: center; transition: all 1s; transition-delay: 1s;} .mariebywally:before {content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-image: url(https://i.imgur.com/CVnuuIV.png); transition-delay: 1s;} .mariebywally:after {content: ''; position: absolute; bottom: 8px; left: 0; width: 125px; height: 56px; background-image: url(https://i.imgur.com/Waav16f.png); opacity: 1; transition: all 1s; transition-delay: .8s;} .mariebywally>span {--mariec-lg: linear-gradient(60deg, #B700ED, #ED9700); position: relative; z-index: 2; color: #fff; font: 600 9px var(--fuente5); text-transform: uppercase; letter-spacing: 1px; text-shadow: 0px -1px 9px rgb(237 151 0 / 71%); border: 1px solid rgb(237 151 0 / 71%); padding: 10px; backdrop-filter: blur(2px); top: 60px; left: -20px; opacity: 0; transition: all 1s; transition-delay: .5s;} .mariebywally>span>quot {position: relative; left: 20px; opacity: 0; transition: all 1s; transition-delay: 0s;} .mariebywally>span>quot>b, .mariebywally>span>quot>strong {background: var(--mariec-lg); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: var(--fuente3); text-shadow: none;} .mariebywally>span>quot>strong {font-style: italic;} .mariebywally:hover {transform: translateY(-5px); box-shadow: 0px 10px 20px 2px rgba(237,151,0,0.7); transition: all 1s; transition-delay: 0s;} .mariebywally:hover:before {filter: grayscale(1); opacity: .5; transition: all 1s; transition-delay: 0s;} .mariebywally:hover:after {bottom: 0; opacity: 0; transition: all 1s; transition-delay: .5s;} .mariebywally:hover>span {left: 0; opacity: 1; transition: all 1s; transition-delay: 1s;} .mariebywally:hover>span>quot {left: 0; opacity: 1; transition: all 1s; transition-delay: 1.5s;}

.gwenbyvera {width: 400px; height: 200px; margin: 8px auto; background-image: url(https://i.imgur.com/NsCeREf.png); box-shadow: 0px 5px 10px 0px rgba(48,198,41,0.7); display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 10px; transform-style: preserve-3d; transform: perspective(1000px); transition: transform 0.3s ease, box-shadow 0.3s ease; transition: all 1s;} .gwenbyvera:hover {box-shadow: 0px 10px 20px 2px rgba(48,198,41,0.7); transform: perspective(1000px) rotateY(15deg) rotateX(10deg); cursor pointer; transition: all 1s;}

.med-bywal {width: 350px; height: 180px; margin: 8px auto; background-image: url(https://i.imgur.com/rqBjtkt.png); border: 1px solid #D6BF40; display: flex; justify-content: center; align-items: flex-end; box-sizing: border-box; padding-bottom: 20px;} .med-bywal>span {color: #D6BF40; display: block; width: 95%; font: 700 9px var(--fuente5); text-transform: uppercase; letter-spacing: 1px; background: #000000d4; padding: 5px; text-align: center;}