html, body { margin: none; padding: none; } .wp-embed-custom-card { position: relative; border: 1px solid #e1e1e1; border-radius: 8px; overflow: hidden; max-width: 600px; font-family: sans-serif; box-shadow: 2px 2px 5px rgba(0,0,0,0.05); box-shadow: 2px 2px 5px rgba(0,0,0,0.5); margin: 10px auto; animation: card-ani 5s infinite; } @keyframes card-ani { 0% { transform: translate(-3%); } 47% { transform: rotate(1deg); } 50% { transform: translate(3%); } 63% { transform: rotate(-1deg); } 100% { transform: translate(-3%); } } #gline-div { position: absolute; bottom: 20px; left: 0; width: 100%; height: 1%; z-index: -1; opacity: 0.3; background-image: linear-gradient(to right, red, orange, yellow, green, lightblue, blue, violet); animation: move-ani 5s infinite; } @keyframes move-ani { 0% { transform: translate(-100%); } 50% { transform: translate(120%); height: 0.1%; } 100% { transform: translate(-100%); } } .wp-embed-custom-card #card-box { display: flex; text-decoration: none; color: inherit; align-items: center; padding: 10px; padding: 0px; } #img-div { width: 200px; height: 200px; width: 196px; height: 196px; flex-shrink: 0; border-radius: 6px; background-size: cover; background-position: center; border: 1px solid #f0f0f0; margin-right: 15px; } #ttl-div { position: relative; flex: 1; padding-right: 15px; padding-right: 10px; min-width: 0; height: 100%; } #ttl-div h4 { margin: 0 0 8px 0; margin: 0 0 6px 0; font-size: 16px; color: #222; font-weight: bold; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #ttl-div p { margin: 0; font-size: 13px; color: #666; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #home-span { position: absolute; bottom: 3px; right: 5px; font-size: 11px; color: #aeaeae; display: block; margin-top: 8px; margin-top: 40px; } #info-div { position: absolute; top: 0px; width: 100%; font-weight: bold; font-size: 80%; text-align: center; text-shadow: 1px 1px cyan; color: rgb(0,0,139); } @media (pointer: coarse) { #img-div { max-width: 160px; max-height: 160px; } #gline-div { opacity: 0.5; } #home-span { } }