.component_dashboard{ .box-element { display: flex; flex-wrap: wrap; margin: -5px -5px 20px -5px; .backend{ position: relative; width: 20%; @media (max-width: 1350px){width: 25%;} @media (max-width: 900px){width: 33.33%;} @media (max-width: 750px){width: 50%;} span{ cursor: pointer; position: absolute; top: 0px; right: 0px; font-size: 1.5em; font-family: monospace; display: inline-block; width: 25px; line-height: 25px; background: var(--bg-color); border-radius: 50%; box-shadow: 2px 2px 2px var(--light); color: var(--color); text-shadow: none; } > div { box-shadow: 2px 2px 10px var(--emphasis-primary); margin: 8px; padding: 30px 0; @media (max-width: 900px){ padding: 25px 0; } @media (max-width: 750px){ padding: 20px 0; } text-align: center; background: var(--primary); color: white; text-shadow: 0px 0px 1px var(--color); font-size: 1.1em; text-transform: uppercase; border-radius: 2px; } } } form{ > div{ position: relative; > .icons{ position: absolute; border-radius: 50%; padding: 10px; background: var(--light); cursor: pointer; right: -15px; top: -5px; box-shadow: rgba(0, 0, 0, 0.14) 0px 4px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 10px 0px, rgba(0, 0, 0, 0.2) 0px 2px 4px -1px; .component_icon{ height: 20px; } } } } }