Разработка Адаптивный макет разделов

* {
  margin: 0;
  font: inherit;
}

.ico svg, .ico:before {
  border-radius: 50%;
  transform-origin: 50% 0;
  transform: rotate(-8deg);
  animation: osc 0.3s ease-in-out infinite alternate;
}

@keyframes osc {
  to {
    transform: rotate(8deg);
  }
}
body {
  --narr: 1;
  --notnarr: calc(1 - var(--narr));
  --wide: 0;
  --notwide: calc(1 - var(--wide));
  --nor: calc(var(--notnarr)*var(--notwide));
  --or: calc(1 - var(--nor));
  --sum: calc(1 + var(--narr));
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  overflow-x: hidden;
  min-height: 100vh;
  background: linear-gradient(to right top, #ebedec, #e3e7e6, #dbe1e0, #d3dadb, #ccd4d6);
}
body:before {
  --uw: calc(var(--nor)*(100% - var(--n)*2em)/var(--n) +
                       var(--or)*12.5em);
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: calc(var(--sum)*2*var(--uw));
  transform: translate(calc(var(--sum)*50%/var(--n)), -50%);
  background: radial-gradient(circle at calc(50% - 1em) calc(39% - 1em), #fff calc(0.25em - 1px), rgba(255, 255, 255, 0) 0.25em), radial-gradient(circle at calc(50% + 1em) calc(39% - 1em), #fff calc(0.25em - 1px), rgba(255, 255, 255, 0) 0.25em), radial-gradient(circle at 50% 39%, #fff calc(0.625em - 1px), rgba(255, 255, 255, 0) 0.625em);
  background-size: calc(50%/(2 - var(--narr))) calc(100%/(1 + var(--narr)));
  clip-path: inset(0 calc(var(--sum)*25%) 0 0);
  filter: drop-shadow(5px 5px 4px rgba(0, 0, 0, 0.2));
  content: '';
}
@media (max-width: 480px) {
  body:before {
    display: none;
  }
}
@media (min-width: 38em) {
  body {
    --narr: 0 ;
  }
}
@media (min-width: 58em) {
  body {
    --wide: 1 ;
  }
}

.hid {
  position: absolute;
  clip-path: inset(50%);
}

path {
  --s: 2;
  fill: none;
  stroke: currentcolor;
  stroke-width: var(--s);
  stroke-linecap: round;
}
path.d {
  stroke-dasharray: 0 calc(2*var(--s));
}
path.t {
  --s: 4 ;
}

section {
  display: flex;
  flex-direction: column;
  padding: 1em 1em;
  min-width: 7.5em;
  width: calc(var(--nor)*(100% - var(--n)*2em)/var(--n) + var(--or)*12.5em);
  font-family: sans-serif;
  text-align: center;
  text-transform: uppercase;
}

h3, a {
  color: var(--c0);
}

h3 {
  padding: 1em 0 .5em;
  font-size: calc(var(--nor)*2vw + var(--or)*1.16em);
}

p {
  height: 3em;
  font-size: 0.75em;
}

.ico {
  order: -1;
  position: relative;
  margin-bottom: calc(100% + 2.875em + 2px);
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.625em #fff, 11px 11px 12px -9px rgba(27, 14, 0, 0.28);
  background: linear-gradient(135deg, var(--c0), var(--c1)) padding-box;
}
.ico a {
  --sgn: 1;
  box-sizing: border-box;
  display: grid;
  place-content: center;
  padding: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  clip-path: circle(calc(50% - 0.625em));
}
.ico a:hover {
  --sgn: -1 ;
}
.ico svg {
  --w: calc(100% - 4em);
  box-sizing: border-box;
  position: absolute;
  margin: calc(-.5*var(--w));
  border: solid 1em transparent;
  width: var(--w);
  height: var(--w);
  border-radius: 50%;
  box-shadow: calc(var(--sgn)*36px) 27px 11px -5px rgba(27, 14, 0, 0.16);
  background: linear-gradient(135deg, #fff, #d2d2d2) border-box;
  transition: 0.3s ease-out;
}
.ico:before, .ico:after {
  position: absolute;
  content: "";
}
.ico:before {
  box-sizing: border-box;
  top: calc(200% + 1px);
  left: calc(50% - 1.4375em);
  border: solid 0.625em transparent;
  width: 2.875em;
  height: 2.875em;
  box-shadow: 0 0 0 2px #fff;
  background: inherit;
  filter: drop-shadow(1px 3px 2px rgba(0, 0, 0, 0.32));
}
.ico:after {
  width: 0.375em;
  top: calc(100% - 0.5em);
  left: calc(50% - 0.5em);
  border: solid 0 transparent;
  border-width: 0.5em 0.3125em;
  padding-top: 100%;
  background: linear-gradient(#fff, #fff) padding-box, radial-gradient(circle at 50% 0.5em, #fff calc(0.5em - 1px), rgba(255, 255, 255, 0) 0.5em) border-box, radial-gradient(circle at 50% calc(100% - 0.5em), #fff calc(0.375em - 1px), rgba(255, 255, 255, 0) 0.375em) border-box;
}