<section>
  <div class="icon-button">
    <a class="button" href="#">
      <span>Download MP3</span>
      <svg width="100" height="100" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <g>
          <path d="m89.699 68.051v17.574c0 0.35156-0.050781 0.67578-0.125 0.97656-0.35156 1.7266-1.875 3.0234-3.6758 3.0234h-71.824c-1.9258 0-3.5234-1.4766-3.7266-3.3516-0.050781-0.22656-0.050781-0.42578-0.050781-0.67578v-17.574c0-2.0742 1.6992-3.75 3.75-3.75 1.0234 0 1.9766 0.42578 2.6484 1.1016 0.67578 0.67578 1.1016 1.625 1.1016 2.6484v14.074h64.426v-14.074c0-2.0742 1.6992-3.75 3.75-3.75 1.0234 0 1.9766 0.42578 2.6484 1.1016 0.65234 0.69922 1.0781 1.6484 1.0781 2.6758z"></path>
          <path d="m71.625 50.449-18.426 18.426c-0.023438 0.050781-0.074219 0.074219-0.10156 0.10156-0.67578 0.67578-1.5508 1.1016-2.4258 1.2266-0.074219 0-0.14844 0.023437-0.22656 0.023437-0.14844 0.023438-0.30078 0.023438-0.44922 0.023438l-0.42578-0.023438c-0.074218 0-0.14844-0.023437-0.22656-0.023437-0.89844-0.125-1.75-0.55078-2.4258-1.2266-0.023438-0.023437-0.074219-0.074218-0.10156-0.10156l-18.426-18.426c-0.85156-0.85156-1.2734-1.9766-1.2734-3.1016s0.42578-2.25 1.2734-3.1016c1.6992-1.6992 4.4766-1.6992 6.1992 0l11.074 11.074 0.011719-40.57c0-2.3984 1.9766-4.375 4.375-4.375 1.1992 0 2.3008 0.5 3.1016 1.2734 0.80078 0.80078 1.2734 1.875 1.2734 3.1016v40.574l11.074-11.074c1.6992-1.6992 4.4766-1.6992 6.1992 0 1.625 1.7266 1.625 4.5-0.074219 6.1992z"></path>
        </g>
      </svg>
    </a>
  </div>

</section>

<section>
  <div class="icon-button">
    <a class="button" href="#">
      <span>Download MP3</span>
      <svg width="100" height="100" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <g>
          <path d="m89.699 68.051v17.574c0 0.35156-0.050781 0.67578-0.125 0.97656-0.35156 1.7266-1.875 3.0234-3.6758 3.0234h-71.824c-1.9258 0-3.5234-1.4766-3.7266-3.3516-0.050781-0.22656-0.050781-0.42578-0.050781-0.67578v-17.574c0-2.0742 1.6992-3.75 3.75-3.75 1.0234 0 1.9766 0.42578 2.6484 1.1016 0.67578 0.67578 1.1016 1.625 1.1016 2.6484v14.074h64.426v-14.074c0-2.0742 1.6992-3.75 3.75-3.75 1.0234 0 1.9766 0.42578 2.6484 1.1016 0.65234 0.69922 1.0781 1.6484 1.0781 2.6758z"></path>
          <path d="m71.625 50.449-18.426 18.426c-0.023438 0.050781-0.074219 0.074219-0.10156 0.10156-0.67578 0.67578-1.5508 1.1016-2.4258 1.2266-0.074219 0-0.14844 0.023437-0.22656 0.023437-0.14844 0.023438-0.30078 0.023438-0.44922 0.023438l-0.42578-0.023438c-0.074218 0-0.14844-0.023437-0.22656-0.023437-0.89844-0.125-1.75-0.55078-2.4258-1.2266-0.023438-0.023437-0.074219-0.074218-0.10156-0.10156l-18.426-18.426c-0.85156-0.85156-1.2734-1.9766-1.2734-3.1016s0.42578-2.25 1.2734-3.1016c1.6992-1.6992 4.4766-1.6992 6.1992 0l11.074 11.074 0.011719-40.57c0-2.3984 1.9766-4.375 4.375-4.375 1.1992 0 2.3008 0.5 3.1016 1.2734 0.80078 0.80078 1.2734 1.875 1.2734 3.1016v40.574l11.074-11.074c1.6992-1.6992 4.4766-1.6992 6.1992 0 1.625 1.7266 1.625 4.5-0.074219 6.1992z"></path>
        </g>
      </svg>
    </a>
  </div>

  <div class="icon-button">
    <a class="button" href="#">
      <span>Download MP3</span>
      <svg width="100" height="100" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <g>
          <path d="m89.699 68.051v17.574c0 0.35156-0.050781 0.67578-0.125 0.97656-0.35156 1.7266-1.875 3.0234-3.6758 3.0234h-71.824c-1.9258 0-3.5234-1.4766-3.7266-3.3516-0.050781-0.22656-0.050781-0.42578-0.050781-0.67578v-17.574c0-2.0742 1.6992-3.75 3.75-3.75 1.0234 0 1.9766 0.42578 2.6484 1.1016 0.67578 0.67578 1.1016 1.625 1.1016 2.6484v14.074h64.426v-14.074c0-2.0742 1.6992-3.75 3.75-3.75 1.0234 0 1.9766 0.42578 2.6484 1.1016 0.65234 0.69922 1.0781 1.6484 1.0781 2.6758z"></path>
          <path d="m71.625 50.449-18.426 18.426c-0.023438 0.050781-0.074219 0.074219-0.10156 0.10156-0.67578 0.67578-1.5508 1.1016-2.4258 1.2266-0.074219 0-0.14844 0.023437-0.22656 0.023437-0.14844 0.023438-0.30078 0.023438-0.44922 0.023438l-0.42578-0.023438c-0.074218 0-0.14844-0.023437-0.22656-0.023437-0.89844-0.125-1.75-0.55078-2.4258-1.2266-0.023438-0.023437-0.074219-0.074218-0.10156-0.10156l-18.426-18.426c-0.85156-0.85156-1.2734-1.9766-1.2734-3.1016s0.42578-2.25 1.2734-3.1016c1.6992-1.6992 4.4766-1.6992 6.1992 0l11.074 11.074 0.011719-40.57c0-2.3984 1.9766-4.375 4.375-4.375 1.1992 0 2.3008 0.5 3.1016 1.2734 0.80078 0.80078 1.2734 1.875 1.2734 3.1016v40.574l11.074-11.074c1.6992-1.6992 4.4766-1.6992 6.1992 0 1.625 1.7266 1.625 4.5-0.074219 6.1992z"></path>
        </g>
      </svg>
    </a>
  </div>

  <div class="icon-button">
    <a class="button" href="#">
      <span>Download MP3</span>
      <svg width="100" height="100" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <g>
          <path d="m89.699 68.051v17.574c0 0.35156-0.050781 0.67578-0.125 0.97656-0.35156 1.7266-1.875 3.0234-3.6758 3.0234h-71.824c-1.9258 0-3.5234-1.4766-3.7266-3.3516-0.050781-0.22656-0.050781-0.42578-0.050781-0.67578v-17.574c0-2.0742 1.6992-3.75 3.75-3.75 1.0234 0 1.9766 0.42578 2.6484 1.1016 0.67578 0.67578 1.1016 1.625 1.1016 2.6484v14.074h64.426v-14.074c0-2.0742 1.6992-3.75 3.75-3.75 1.0234 0 1.9766 0.42578 2.6484 1.1016 0.65234 0.69922 1.0781 1.6484 1.0781 2.6758z"></path>
          <path d="m71.625 50.449-18.426 18.426c-0.023438 0.050781-0.074219 0.074219-0.10156 0.10156-0.67578 0.67578-1.5508 1.1016-2.4258 1.2266-0.074219 0-0.14844 0.023437-0.22656 0.023437-0.14844 0.023438-0.30078 0.023438-0.44922 0.023438l-0.42578-0.023438c-0.074218 0-0.14844-0.023437-0.22656-0.023437-0.89844-0.125-1.75-0.55078-2.4258-1.2266-0.023438-0.023437-0.074219-0.074218-0.10156-0.10156l-18.426-18.426c-0.85156-0.85156-1.2734-1.9766-1.2734-3.1016s0.42578-2.25 1.2734-3.1016c1.6992-1.6992 4.4766-1.6992 6.1992 0l11.074 11.074 0.011719-40.57c0-2.3984 1.9766-4.375 4.375-4.375 1.1992 0 2.3008 0.5 3.1016 1.2734 0.80078 0.80078 1.2734 1.875 1.2734 3.1016v40.574l11.074-11.074c1.6992-1.6992 4.4766-1.6992 6.1992 0 1.625 1.7266 1.625 4.5-0.074219 6.1992z"></path>
        </g>
      </svg>
    </a>
  </div>
</section>

:root {
  --color-light: hsl(40 75% 90%);
  --color-dark: hsl(40 75% 10%);
}

body {
  background: var(--color-light);
}

.icon-button {
  container: button / inline-size;
}

.button {
  border: 1px solid var(--color-dark);
  color: var(--color-dark);
  display: flex;
  flex-direction: column-reverse;
  font-family: Merriweather, serif;
  font-size: 1.5em;
  font-weight: 800;
  justify-content: center;
  padding: 1.5em;
  background-color: var(--color-light);
  border-radius: 4cqi;
  text-decoration: none;
  transition: all .25s ease-in;
  
  &:hover {
    background-color: var(--color-dark);
    color: var(--color-light);
    
    svg {
      fill: var(--color-light);
    }
  }
}

.button svg {
  flex: 0 0 32px;
  height: 32px;
  width: 32px;
  transition: all .25s ease-in;
}

@container button (width < 40ch) {
  .button {
    align-items: center;
    aspect-ratio: 2 / 1;
    font-size: 1.2em;
    gap: 1em;
    position: relative;
    text-align: center;
  }
}

@container button (width >= 40ch) {
  .button {
    justify-content: space-between;
    color: var(--color-light);
    flex-direction: row;
    min-height: initial;
    background-color: var(--color-dark);
    
    &:hover {
      background-color: var(--color-light);
      color: var(--color-dark);
    
      svg {
        fill: var(--color-dark);
      }
    }
  }
  
  svg {
    fill: var(--color-light);
  }
}

section {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  margin-block: 2rem;
}

@media (width =< 100ch) {
  section {
    display: block;
  }
}