.specials { article { background: @surface; color: @on-surface; padding: @space-md; border-radius: 10px; box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.1); margin-bottom: @space-lg; font-weight: 700; display: flex; justify-content: flex-start; align-items: center; gap: @space-md; @media (max-width: 768px) { flex-direction: column; text-align: center; } .icon { width: 80px; height: 80px; display: flex; justify-content: center; align-items: center; flex-shrink: 0; @media (max-width: 768px) { width: 50px; height: 50px; } img { width: 100%; } } .title { margin-bottom: @space-xs; font-size: 24px; line-height: 1.3; @media (max-width: 768px) { font-size: 20px; } } &.hovered { display: none; @media (min-width: 768px) { display: flex; position: fixed; top: 40%; left: 30%; right: 30%; z-index: 999; box-shadow: inset 0 0 2px 1px white, 0 10px 40px 0 rgba(0, 0, 0, 0.1), 0 10px 40px 0 rgba(0, 0, 0, 0.1); background: linear-gradient( 90deg, rgba(238, 254, 255, 1) 0%, rgba(255, 254, 255, 1) 35%, rgba(215, 255, 254, 1) 100% ), radial-gradient(88.73% 230.98% at 25.76% 13.14%, #ffffff 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(50% 20.05% at 50% 46.13%, #fffeff 0%, #d7fffe 100%); } } } .row:nth-child(2) > *:nth-child(2) > article:first-child { margin-top: @space-xl; @media (max-width: 1050px) { margin-top: 0; } } }