/* Consistent thumbnail actions, scoped to the homepage portfolio. */
#portfolio #suoer .action { display: flex; align-items: flex-start; gap: 34px; right: 32px; bottom: 48px; }
#portfolio #suoer .action > a { display: grid; place-items: center; width: 44px; height: 44px; margin: 0; color: #34354f; background: #fff; border: 1px solid #ffffff; box-shadow: 0 2px 10px #0002; transition: color .18s, background .18s, transform .18s, opacity .18s; }
#portfolio #suoer .action > a.readmore { width: 48px; height: 48px; margin-top: -2px; color: #ea2e2b; border: 2px solid #ea2e2b; }
#portfolio #suoer .action svg { width: 23px; height: 23px; }
#portfolio #suoer .portfolio-action-label { position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 10px; line-height: 1.4; font-weight: 700; color: #fff; }
#portfolio #suoer .action > a:hover, #portfolio #suoer .action > a:focus-visible { background: #ea2e2b; color: #fff; border-color: #ea2e2b; }
#portfolio #suoer .action > a:focus-visible { outline: 2px solid white; outline-offset: 4px; }
#portfolio #suoer .content:focus-within .overlay-content { opacity: 1; }
#portfolio #suoer .content:focus-within .action a { opacity: 1; transform: none; }
#portfolio #suoer .content:focus-within .info > * { opacity: 1; transform: none; }
@media (hover: none) { #portfolio #suoer .overlay-content, #portfolio #suoer .action > a { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #portfolio #suoer .action > a { transition: none; } }