.timer-container{display:flex;justify-content:center;align-items:center;width:130px;height:130px}.hexagon{--b:3px;height:120px;aspect-ratio:cos(30deg);clip-path:polygon(50% 0,-50% 50%,50% 100%,150% 50%,50% 0,50% var(--b),calc(100% - var(--b)*sin(60deg)) calc(25% + var(--b)*cos(60deg)),calc(100% - var(--b)*sin(60deg)) calc(75% - var(--b)*cos(60deg)),50% calc(100% - var(--b)),calc(var(--b)*sin(60deg)) calc(75% - var(--b)*cos(60deg)),calc(var(--b)*sin(60deg)) calc(25% + var(--b)*cos(60deg)),50% var(--b));background:#fff;position:absolute;transition:.3s ease;margin-bottom:10px}.timer-color-red:hover .hexagon{background:#901b25}.timer-color-red:hover p{color:#901b25}.timer-color-yellow:hover .hexagon{background:#fdd42a}.timer-color-yellow:hover p{color:#fdd42a}.clase-random{height:auto}@media (min-width:640px){.timer-container{width:200px;height:200px}.hexagon{--b:6px;height:190px}}@media (min-height:660px){.clase-random{height:100%}}