:root { --tech-gap: 4svw; } .tech-cat { border: 1px solid salmon; display: flex; flex-flow: column wrap; padding: 0px 2svw; padding-bottom: 2svh; margin-bottom: 3svh; column-gap: var(--tech-gap); flex: 1 1 30%; min-width: clamp(250px, 33%, 100%); /* flex: 0 1 calc((100% - 2 * 2svw) / 3); */ } .tech-cat h3 { display: flex; /* flex: 0 1 100%; */ border-bottom: var(--underlineTitle); margin: 2svh 1svw; padding-left: 2svw; padding-bottom: 1svh; } .tech-row { display: flex; flex-flow: row wrap; column-gap: 2svw; row-gap: 4svh; justify-content: space-between; align-items: stretch; } .tech-card { border: 1px solid whitesmoke; display: flex; flex-direction: column; align-items: center; padding-bottom: 1svh; flex: 0 1 calc((100% - 2 * var(--tech-gap)) / 4); text-decoration: none; color: inherit; padding: 0px 1svw; padding-top: 2svh; } .tech-card img { width: calc(100%- 2svw); max-height: 40svh; min-height: 50px; min-width: 50px; aspect-ratio: 1; object-fit: contain; } .tech-card progress { width: 90%; margin-bottom: 0.5svh; overflow: hidden; appearance: none; border-radius: 999px; justify-self: flex-end; align-self: center; } .tech-card h4 { margin: 2svh 0px; font-weight: normal; } /* for chromium browsers */ .tech-card progress::-webkit-progress-value { background-color: steelblue; /* border-radius: 999px; */ } /* for firefox browsers */ .tech-card progress::-moz-progress-bar { background-color: steelblue; /* border-radius: 999px; */ } /* 48.19 , 68.58*/