* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:root {
  font-size: clamp(40%, 1% + 2vw, 62.5%);
  font-family: "Roboto", sans-serif;

  --hue: 194;
  --bg-color: hsla(var(--hue), 5%, 7%, 1);
  --text-color: hsla(var(--hue), 40%, 98%, 1);
}

/* modo ligth */
html.light {
  --bg-color: hsla(var(--hue), 255, 255, 1);
  --text-color: hsla(var(--hue), 50, 56, 1);
}
html.light .ph-sun,
html:not(.light) .ph-moon {
  display: none;
}

#toggle-mode {
  position: absolute;
  right: 3.2rem;
  top: 3.2rem;
  font-size: 3.2rem;
  line-height: 0;
  color: var(--text-color);
}
/* modo ligth */

.flex {
  display: flex;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  border: 0;
  appearance: none;
}

body {
  font-size: 1.6rem;
  background: var(--bg-color);
  color: var(--text-color);
  height: 100vh;

  display: grid;
  place-content: center;
}

#app {
  display: grid;
  justify-items: self-end;
  align-items: center;
  grid-template-columns: 1fr 1fr;
  gap: 19.2rem;
}
aside {
  width: 30.8rem;
  height: 33.6rem;
  display: grid;
  grid-template-areas:
    "a b"
    "c d";
  grid-gap: 3.2rem;
}

#timer {
  font-size: 12.7rem;
}
#controls {
  margin-top: 1.7rem;
  gap: 2.5rem;
}
button {
  background-color: transparent;
  border: 0px;
  cursor: pointer;
  font-size: 6.4rem;
}

.running .ph-play-circle,
.running .ph-timer,
html:not(.running) .ph-pause-circle {
  display: none;
}

.cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3.2rem;
  border-radius: 2.4rem;
  background-color: #e1e1e6;
  width: 13.8rem;
  height: 15.2rem;
  padding: 2.4rem 0;
  position: relative;
}

.progress {
  position: absolute;
  width: 9rem;
  height: 1.6rem;
  border-radius: 5px;
  bottom: 2.4rem;
}

.cards:nth-child(1) {
  background: no-repeat
    url('data:image/svg+xml,%3Csvg width="138" height="152" viewBox="0 0 138 152" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 24C0 10.7452 10.7452 0 24 0H114C127.255 0 138 10.7452 138 24V128C138 141.255 127.255 152 114 152H24C10.7452 152 0 141.255 0 128V24Z" fill="%23E1E1E6"/%3E%3Cpath d="M51.8355 80V75.8H67.0329V63.2H60.8158C56.9934 63.2 53.7352 61.835 51.0411 59.105C48.347 56.375 47 53.0733 47 49.2C47 46.4 47.7599 43.8217 49.2796 41.465C50.7993 39.1083 52.8487 37.3933 55.4276 36.32C55.8421 32.82 57.3503 29.8917 59.9523 27.535C62.5543 25.1783 65.6053 24 69.1053 24C72.6053 24 75.6562 25.1783 78.2582 27.535C80.8602 29.8917 82.3684 32.82 82.7829 36.32C85.3618 37.3933 87.4112 39.1083 88.9309 41.465C90.4507 43.8217 91.2105 46.4 91.2105 49.2C91.2105 53.0733 89.8635 56.375 87.1694 59.105C84.4753 61.835 81.2171 63.2 77.3947 63.2H71.1776V75.8H87.0658V80H51.8355ZM60.8158 59H77.3947C80.0658 59 82.3454 58.0433 84.2336 56.13C86.1217 54.2167 87.0658 51.9067 87.0658 49.2C87.0658 47.24 86.5132 45.455 85.4079 43.845C84.3026 42.235 82.875 41.0333 81.125 40.24L78.9145 39.26L78.6382 36.81C78.3158 34.3367 77.2566 32.2833 75.4605 30.65C73.6645 29.0167 71.5461 28.2 69.1053 28.2C66.6645 28.2 64.5461 29.0167 62.75 30.65C60.9539 32.2833 59.8947 34.3367 59.5724 36.81L59.2961 39.26L57.0855 40.24C55.3355 41.0333 53.9079 42.235 52.8026 43.845C51.6974 45.455 51.1447 47.24 51.1447 49.2C51.1447 51.9067 52.0888 54.2167 53.977 56.13C55.8651 58.0433 58.1447 59 60.8158 59Z" fill="%23323238"/%3E%3C/svg%3E%0A');
}
.cards:nth-child(1).music-on {
  background: no-repeat
    url('data:image/svg+xml,%3Csvg width="138" height="152" viewBox="0 0 138 152" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 24C0 10.7452 10.7452 0 24 0H114C127.255 0 138 10.7452 138 24V128C138 141.255 127.255 152 114 152H24C10.7452 152 0 141.255 0 128V24Z" fill="%2302799D"/%3E%3Cpath d="M51.8355 80V75.8H67.0329V63.2H60.8158C56.9934 63.2 53.7352 61.835 51.0411 59.105C48.347 56.375 47 53.0733 47 49.2C47 46.4 47.7599 43.8217 49.2796 41.465C50.7993 39.1083 52.8487 37.3933 55.4276 36.32C55.8421 32.82 57.3503 29.8917 59.9523 27.535C62.5543 25.1783 65.6053 24 69.1053 24C72.6053 24 75.6562 25.1783 78.2582 27.535C80.8602 29.8917 82.3684 32.82 82.7829 36.32C85.3618 37.3933 87.4112 39.1083 88.9309 41.465C90.4507 43.8217 91.2105 46.4 91.2105 49.2C91.2105 53.0733 89.8635 56.375 87.1694 59.105C84.4753 61.835 81.2171 63.2 77.3947 63.2H71.1776V75.8H87.0658V80H51.8355ZM60.8158 59H77.3947C80.0658 59 82.3454 58.0433 84.2336 56.13C86.1217 54.2167 87.0658 51.9067 87.0658 49.2C87.0658 47.24 86.5132 45.455 85.4079 43.845C84.3026 42.235 82.875 41.0333 81.125 40.24L78.9145 39.26L78.6382 36.81C78.3158 34.3367 77.2566 32.2833 75.4605 30.65C73.6645 29.0167 71.5461 28.2 69.1053 28.2C66.6645 28.2 64.5461 29.0167 62.75 30.65C60.9539 32.2833 59.8947 34.3367 59.5724 36.81L59.2961 39.26L57.0855 40.24C55.3355 41.0333 53.9079 42.235 52.8026 43.845C51.6974 45.455 51.1447 47.24 51.1447 49.2C51.1447 51.9067 52.0888 54.2167 53.977 56.13C55.8651 58.0433 58.1447 59 60.8158 59Z" fill="%23fff"/%3E%3C/svg%3E%0A');
}

.cards:nth-child(2) {
  background: url('data:image/svg+xml,%3Csvg width="138" height="152" viewBox="0 0 138 152" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 24C0 10.7452 10.7452 0 24 0H114C127.255 0 138 10.7452 138 24V128C138 141.255 127.255 152 114 152H24C10.7452 152 0 141.255 0 128V24Z" fill="%23E1E1E6"/%3E%3Cpath d="M53.5263 69.3333C52.9123 69.3333 52.375 69.1 51.9145 68.6333C51.4539 68.1667 51.2237 67.6222 51.2237 67C51.2237 66.3778 51.4539 65.8333 51.9145 65.3667C52.375 64.9 52.9123 64.6667 53.5263 64.6667C54.1404 64.6667 54.6776 64.9 55.1382 65.3667C55.5987 65.8333 55.8289 66.3778 55.8289 67C55.8289 67.6222 55.5987 68.1667 55.1382 68.6333C54.6776 69.1 54.1404 69.3333 53.5263 69.3333ZM85.1053 69.3333C84.4912 69.3333 83.9539 69.1 83.4934 68.6333C83.0329 68.1667 82.8026 67.6222 82.8026 67C82.8026 66.3778 83.0329 65.8333 83.4934 65.3667C83.9539 64.9 84.4912 64.6667 85.1053 64.6667C85.7193 64.6667 86.2566 64.9 86.7171 65.3667C87.1776 65.8333 87.4079 66.3778 87.4079 67C87.4079 67.6222 87.1776 68.1667 86.7171 68.6333C86.2566 69.1 85.7193 69.3333 85.1053 69.3333ZM61.4211 80C60.807 80 60.2697 79.7667 59.8092 79.3C59.3487 78.8333 59.1184 78.2889 59.1184 77.6667C59.1184 77.0444 59.3487 76.5 59.8092 76.0333C60.2697 75.5667 60.807 75.3333 61.4211 75.3333C62.0351 75.3333 62.5724 75.5667 63.0329 76.0333C63.4934 76.5 63.7237 77.0444 63.7237 77.6667C63.7237 78.2889 63.4934 78.8333 63.0329 79.3C62.5724 79.7667 62.0351 80 61.4211 80ZM69.3158 69.3333C68.7018 69.3333 68.1645 69.1 67.7039 68.6333C67.2434 68.1667 67.0132 67.6222 67.0132 67C67.0132 66.3778 67.2434 65.8333 67.7039 65.3667C68.1645 64.9 68.7018 64.6667 69.3158 64.6667C69.9298 64.6667 70.4671 64.9 70.9276 65.3667C71.3882 65.8333 71.6184 66.3778 71.6184 67C71.6184 67.6222 71.3882 68.1667 70.9276 68.6333C70.4671 69.1 69.9298 69.3333 69.3158 69.3333ZM77.2105 80C76.5965 80 76.0592 79.7667 75.5987 79.3C75.1382 78.8333 74.9079 78.2889 74.9079 77.6667C74.9079 77.0444 75.1382 76.5 75.5987 76.0333C76.0592 75.5667 76.5965 75.3333 77.2105 75.3333C77.8246 75.3333 78.3618 75.5667 78.8224 76.0333C79.2829 76.5 79.5132 77.0444 79.5132 77.6667C79.5132 78.2889 79.2829 78.8333 78.8224 79.3C78.3618 79.7667 77.8246 80 77.2105 80ZM56.8158 60C53 60 49.7434 58.6333 47.0461 55.9C44.3487 53.1667 43 49.8667 43 46C43 42.4889 44.239 39.3556 46.7171 36.6C49.1952 33.8444 52.2763 32.3333 55.9605 32.0667C57.364 29.5778 59.2171 27.6111 61.5197 26.1667C63.8224 24.7222 66.4211 24 69.3158 24C73.307 24 76.6513 25.2778 79.3487 27.8333C82.0461 30.3889 83.7018 33.5556 84.3158 37.3333C87.7807 37.5111 90.5329 38.7 92.5724 40.9C94.6118 43.1 95.6316 45.6889 95.6316 48.6667C95.6316 51.7778 94.5461 54.4444 92.375 56.6667C90.2039 58.8889 87.5614 60 84.4474 60H56.8158ZM56.8158 56H84.4474C86.4649 56 88.1754 55.2778 89.5789 53.8333C90.9825 52.3889 91.6842 50.6444 91.6842 48.6C91.6842 46.6 90.9825 44.8889 89.5789 43.4667C88.1754 42.0444 86.4649 41.3333 84.4474 41.3333H80.5V39.3333C80.5 36.1778 79.4145 33.5 77.2434 31.3C75.0724 29.1 72.4298 28 69.3158 28C67.0789 28 65.0285 28.6111 63.1645 29.8333C61.3004 31.0556 59.9298 32.7111 59.0526 34.8L58.5263 36H56.6842C53.9649 36.0889 51.6623 37.1 49.7763 39.0333C47.8904 40.9667 46.9474 43.2889 46.9474 46C46.9474 48.7556 47.9123 51.1111 49.8421 53.0667C51.7719 55.0222 54.0965 56 56.8158 56Z" fill="%23000"/%3E%3C/svg%3E%0A')
    no-repeat;
}
.cards:nth-child(2).music-on {
  background: url('data:image/svg+xml,%3Csvg width="138" height="152" viewBox="0 0 138 152" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 24C0 10.7452 10.7452 0 24 0H114C127.255 0 138 10.7452 138 24V128C138 141.255 127.255 152 114 152H24C10.7452 152 0 141.255 0 128V24Z" fill="%2302799D"/%3E%3Cpath d="M53.5263 69.3333C52.9123 69.3333 52.375 69.1 51.9145 68.6333C51.4539 68.1667 51.2237 67.6222 51.2237 67C51.2237 66.3778 51.4539 65.8333 51.9145 65.3667C52.375 64.9 52.9123 64.6667 53.5263 64.6667C54.1404 64.6667 54.6776 64.9 55.1382 65.3667C55.5987 65.8333 55.8289 66.3778 55.8289 67C55.8289 67.6222 55.5987 68.1667 55.1382 68.6333C54.6776 69.1 54.1404 69.3333 53.5263 69.3333ZM85.1053 69.3333C84.4912 69.3333 83.9539 69.1 83.4934 68.6333C83.0329 68.1667 82.8026 67.6222 82.8026 67C82.8026 66.3778 83.0329 65.8333 83.4934 65.3667C83.9539 64.9 84.4912 64.6667 85.1053 64.6667C85.7193 64.6667 86.2566 64.9 86.7171 65.3667C87.1776 65.8333 87.4079 66.3778 87.4079 67C87.4079 67.6222 87.1776 68.1667 86.7171 68.6333C86.2566 69.1 85.7193 69.3333 85.1053 69.3333ZM61.4211 80C60.807 80 60.2697 79.7667 59.8092 79.3C59.3487 78.8333 59.1184 78.2889 59.1184 77.6667C59.1184 77.0444 59.3487 76.5 59.8092 76.0333C60.2697 75.5667 60.807 75.3333 61.4211 75.3333C62.0351 75.3333 62.5724 75.5667 63.0329 76.0333C63.4934 76.5 63.7237 77.0444 63.7237 77.6667C63.7237 78.2889 63.4934 78.8333 63.0329 79.3C62.5724 79.7667 62.0351 80 61.4211 80ZM69.3158 69.3333C68.7018 69.3333 68.1645 69.1 67.7039 68.6333C67.2434 68.1667 67.0132 67.6222 67.0132 67C67.0132 66.3778 67.2434 65.8333 67.7039 65.3667C68.1645 64.9 68.7018 64.6667 69.3158 64.6667C69.9298 64.6667 70.4671 64.9 70.9276 65.3667C71.3882 65.8333 71.6184 66.3778 71.6184 67C71.6184 67.6222 71.3882 68.1667 70.9276 68.6333C70.4671 69.1 69.9298 69.3333 69.3158 69.3333ZM77.2105 80C76.5965 80 76.0592 79.7667 75.5987 79.3C75.1382 78.8333 74.9079 78.2889 74.9079 77.6667C74.9079 77.0444 75.1382 76.5 75.5987 76.0333C76.0592 75.5667 76.5965 75.3333 77.2105 75.3333C77.8246 75.3333 78.3618 75.5667 78.8224 76.0333C79.2829 76.5 79.5132 77.0444 79.5132 77.6667C79.5132 78.2889 79.2829 78.8333 78.8224 79.3C78.3618 79.7667 77.8246 80 77.2105 80ZM56.8158 60C53 60 49.7434 58.6333 47.0461 55.9C44.3487 53.1667 43 49.8667 43 46C43 42.4889 44.239 39.3556 46.7171 36.6C49.1952 33.8444 52.2763 32.3333 55.9605 32.0667C57.364 29.5778 59.2171 27.6111 61.5197 26.1667C63.8224 24.7222 66.4211 24 69.3158 24C73.307 24 76.6513 25.2778 79.3487 27.8333C82.0461 30.3889 83.7018 33.5556 84.3158 37.3333C87.7807 37.5111 90.5329 38.7 92.5724 40.9C94.6118 43.1 95.6316 45.6889 95.6316 48.6667C95.6316 51.7778 94.5461 54.4444 92.375 56.6667C90.2039 58.8889 87.5614 60 84.4474 60H56.8158ZM56.8158 56H84.4474C86.4649 56 88.1754 55.2778 89.5789 53.8333C90.9825 52.3889 91.6842 50.6444 91.6842 48.6C91.6842 46.6 90.9825 44.8889 89.5789 43.4667C88.1754 42.0444 86.4649 41.3333 84.4474 41.3333H80.5V39.3333C80.5 36.1778 79.4145 33.5 77.2434 31.3C75.0724 29.1 72.4298 28 69.3158 28C67.0789 28 65.0285 28.6111 63.1645 29.8333C61.3004 31.0556 59.9298 32.7111 59.0526 34.8L58.5263 36H56.6842C53.9649 36.0889 51.6623 37.1 49.7763 39.0333C47.8904 40.9667 46.9474 43.2889 46.9474 46C46.9474 48.7556 47.9123 51.1111 49.8421 53.0667C51.7719 55.0222 54.0965 56 56.8158 56Z" fill="white"/%3E%3C/svg%3E%0A')
    no-repeat;
}

.cards:nth-child(3) {
  background: url('data:image/svg+xml,%3Csvg width="138" height="152" viewBox="0 0 138 152" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 24C0 10.7452 10.7452 0 24 0H114C127.255 0 138 10.7452 138 24V128C138 141.255 127.255 152 114 152H24C10.7452 152 0 141.255 0 128V24Z" fill="%23E1E1E6"/%3E%3Cpath d="M94.1836 48.9667V75.3333C94.1836 76.5778 93.7657 77.6667 92.9298 78.6C92.0939 79.5333 91.1187 80 90.0043 80H48.1411C47.0266 80 46.0514 79.5333 45.2155 78.6C44.3797 77.6667 43.9617 76.5778 43.9617 75.3333V48.9667C42.6615 47.7222 41.8024 46.1926 41.3845 44.3778C40.9665 42.563 41.013 40.7481 41.5238 38.9333L44.519 28.4333C44.8905 27.0333 45.5406 25.9444 46.4693 25.1667C47.3981 24.3889 48.4661 24 49.6735 24H88.1932C89.4934 24 90.6312 24.4019 91.6063 25.2056C92.5815 26.0093 93.2549 27.0852 93.6264 28.4333L96.6912 38.9333C97.202 40.7481 97.2369 42.563 96.7957 44.3778C96.3545 46.1926 95.4838 47.7222 94.1836 48.9667ZM75.3765 46.5556C76.7232 46.5556 77.8609 46.063 78.7897 45.0778C79.7184 44.0926 80.0899 42.9 79.9042 41.5L78.1628 28.6667H71.1972V41.5C71.1972 42.8481 71.5919 44.0278 72.3813 45.0389C73.1708 46.05 74.1692 46.5556 75.3765 46.5556ZM62.3509 46.5556C63.6511 46.5556 64.754 46.063 65.6595 45.0778C66.5651 44.0926 67.0178 42.9 67.0178 41.5V28.6667H60.0522L58.3108 41.5C58.1251 42.8481 58.4501 44.0278 59.286 45.0389C60.1219 46.05 61.1435 46.5556 62.3509 46.5556ZM49.6735 46.5556C50.788 46.5556 51.7516 46.1278 52.5642 45.2722C53.3769 44.4167 53.8529 43.3667 53.9922 42.1222L55.8032 28.6667H48.8376L45.6335 40.0222C45.1691 41.6296 45.3548 43.1204 46.1907 44.4944C47.0266 45.8685 48.1875 46.5556 49.6735 46.5556ZM88.4718 46.5556C89.9578 46.5556 91.1304 45.8815 91.9894 44.5333C92.8485 43.1852 93.0459 41.6815 92.5815 40.0222L89.3773 28.6667H82.4118L84.2228 42.1222C84.3621 43.3667 84.8381 44.4167 85.6508 45.2722C86.4634 46.1278 87.4038 46.5556 88.4718 46.5556ZM48.1411 75.3333H90.0043V51.1444C90.0507 51.1963 89.8998 51.2222 89.5515 51.2222C89.2032 51.2222 88.8433 51.2222 88.4718 51.2222C87.3109 51.2222 86.208 50.95 85.1632 50.4056C84.1183 49.8611 83.0851 49.0185 82.0635 47.8778C81.3205 48.9148 80.3917 49.7315 79.2773 50.3278C78.1628 50.9241 76.9322 51.2222 75.5855 51.2222C74.1924 51.2222 72.9966 51.0019 71.9982 50.5611C70.9998 50.1204 70.0362 49.3815 69.1075 48.3444C68.4109 49.2778 67.5286 49.9907 66.4606 50.4833C65.3925 50.9759 64.1851 51.2222 62.8385 51.2222C61.3989 51.2222 60.1219 50.937 59.0074 50.3667C57.8929 49.7963 56.9409 48.9667 56.1515 47.8778C55.037 48.9667 53.9457 49.7963 52.8777 50.3667C51.8096 50.937 50.7416 51.2222 49.6735 51.2222C49.3484 51.2222 49.035 51.2222 48.7332 51.2222C48.4313 51.2222 48.234 51.1963 48.1411 51.1444V75.3333ZM90.0043 75.3333H48.1411C48.234 75.3333 48.4313 75.3333 48.7332 75.3333C49.035 75.3333 49.3484 75.3333 49.6735 75.3333C50.4629 75.3333 51.4033 75.3333 52.4946 75.3333C53.5858 75.3333 54.8048 75.3333 56.1515 75.3333C56.5694 75.3333 57.0338 75.3333 57.5446 75.3333C58.0554 75.3333 58.6011 75.3333 59.1815 75.3333C59.762 75.3333 60.3541 75.3333 60.9578 75.3333C61.5614 75.3333 62.1883 75.3333 62.8385 75.3333C63.3493 75.3333 63.8833 75.3333 64.4406 75.3333C64.9978 75.3333 65.555 75.3333 66.1123 75.3333C66.6695 75.3333 67.2036 75.3333 67.7144 75.3333C68.2252 75.3333 68.6896 75.3333 69.1075 75.3333C70.1291 75.3333 71.1507 75.3333 72.1724 75.3333C73.194 75.3333 74.3317 75.3333 75.5855 75.3333C76.2356 75.3333 76.8741 75.3333 77.501 75.3333C78.1279 75.3333 78.72 75.3333 79.2773 75.3333C79.8345 75.3333 80.3453 75.3333 80.8097 75.3333C81.2741 75.3333 81.692 75.3333 82.0635 75.3333C83.1315 75.3333 84.1996 75.3333 85.2677 75.3333C86.3357 75.3333 87.4038 75.3333 88.4718 75.3333C88.8433 75.3333 89.2032 75.3333 89.5515 75.3333C89.8998 75.3333 90.0507 75.3333 90.0043 75.3333Z" fill="%23323238"/%3E%3C/svg%3E%0A')
    no-repeat;
}
.cards:nth-child(3).music-on {
  background: url('data:image/svg+xml,%3Csvg width="138" height="152" viewBox="0 0 138 152" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 24C0 10.7452 10.7452 0 24 0H114C127.255 0 138 10.7452 138 24V128C138 141.255 127.255 152 114 152H24C10.7452 152 0 141.255 0 128V24Z" fill="%2302799D"/%3E%3Cpath d="M94.1836 48.9667V75.3333C94.1836 76.5778 93.7657 77.6667 92.9298 78.6C92.0939 79.5333 91.1187 80 90.0043 80H48.1411C47.0266 80 46.0514 79.5333 45.2155 78.6C44.3797 77.6667 43.9617 76.5778 43.9617 75.3333V48.9667C42.6615 47.7222 41.8024 46.1926 41.3845 44.3778C40.9665 42.563 41.013 40.7481 41.5238 38.9333L44.519 28.4333C44.8905 27.0333 45.5406 25.9444 46.4693 25.1667C47.3981 24.3889 48.4661 24 49.6735 24H88.1932C89.4934 24 90.6312 24.4019 91.6063 25.2056C92.5815 26.0093 93.2549 27.0852 93.6264 28.4333L96.6912 38.9333C97.202 40.7481 97.2369 42.563 96.7957 44.3778C96.3545 46.1926 95.4838 47.7222 94.1836 48.9667ZM75.3765 46.5556C76.7232 46.5556 77.8609 46.063 78.7897 45.0778C79.7184 44.0926 80.0899 42.9 79.9042 41.5L78.1628 28.6667H71.1972V41.5C71.1972 42.8481 71.5919 44.0278 72.3813 45.0389C73.1708 46.05 74.1692 46.5556 75.3765 46.5556ZM62.3509 46.5556C63.6511 46.5556 64.754 46.063 65.6595 45.0778C66.5651 44.0926 67.0178 42.9 67.0178 41.5V28.6667H60.0522L58.3108 41.5C58.1251 42.8481 58.4501 44.0278 59.286 45.0389C60.1219 46.05 61.1435 46.5556 62.3509 46.5556ZM49.6735 46.5556C50.788 46.5556 51.7516 46.1278 52.5642 45.2722C53.3769 44.4167 53.8529 43.3667 53.9922 42.1222L55.8032 28.6667H48.8376L45.6335 40.0222C45.1691 41.6296 45.3548 43.1204 46.1907 44.4944C47.0266 45.8685 48.1875 46.5556 49.6735 46.5556ZM88.4718 46.5556C89.9578 46.5556 91.1304 45.8815 91.9894 44.5333C92.8485 43.1852 93.0459 41.6815 92.5815 40.0222L89.3773 28.6667H82.4118L84.2228 42.1222C84.3621 43.3667 84.8381 44.4167 85.6508 45.2722C86.4634 46.1278 87.4038 46.5556 88.4718 46.5556ZM48.1411 75.3333H90.0043V51.1444C90.0507 51.1963 89.8998 51.2222 89.5515 51.2222C89.2032 51.2222 88.8433 51.2222 88.4718 51.2222C87.3109 51.2222 86.208 50.95 85.1632 50.4056C84.1183 49.8611 83.0851 49.0185 82.0635 47.8778C81.3205 48.9148 80.3917 49.7315 79.2773 50.3278C78.1628 50.9241 76.9322 51.2222 75.5855 51.2222C74.1924 51.2222 72.9966 51.0019 71.9982 50.5611C70.9998 50.1204 70.0362 49.3815 69.1075 48.3444C68.4109 49.2778 67.5286 49.9907 66.4606 50.4833C65.3925 50.9759 64.1851 51.2222 62.8385 51.2222C61.3989 51.2222 60.1219 50.937 59.0074 50.3667C57.8929 49.7963 56.9409 48.9667 56.1515 47.8778C55.037 48.9667 53.9457 49.7963 52.8777 50.3667C51.8096 50.937 50.7416 51.2222 49.6735 51.2222C49.3484 51.2222 49.035 51.2222 48.7332 51.2222C48.4313 51.2222 48.234 51.1963 48.1411 51.1444V75.3333ZM90.0043 75.3333H48.1411C48.234 75.3333 48.4313 75.3333 48.7332 75.3333C49.035 75.3333 49.3484 75.3333 49.6735 75.3333C50.4629 75.3333 51.4033 75.3333 52.4946 75.3333C53.5858 75.3333 54.8048 75.3333 56.1515 75.3333C56.5694 75.3333 57.0338 75.3333 57.5446 75.3333C58.0554 75.3333 58.6011 75.3333 59.1815 75.3333C59.762 75.3333 60.3541 75.3333 60.9578 75.3333C61.5614 75.3333 62.1883 75.3333 62.8385 75.3333C63.3493 75.3333 63.8833 75.3333 64.4406 75.3333C64.9978 75.3333 65.555 75.3333 66.1123 75.3333C66.6695 75.3333 67.2036 75.3333 67.7144 75.3333C68.2252 75.3333 68.6896 75.3333 69.1075 75.3333C70.1291 75.3333 71.1507 75.3333 72.1724 75.3333C73.194 75.3333 74.3317 75.3333 75.5855 75.3333C76.2356 75.3333 76.8741 75.3333 77.501 75.3333C78.1279 75.3333 78.72 75.3333 79.2773 75.3333C79.8345 75.3333 80.3453 75.3333 80.8097 75.3333C81.2741 75.3333 81.692 75.3333 82.0635 75.3333C83.1315 75.3333 84.1996 75.3333 85.2677 75.3333C86.3357 75.3333 87.4038 75.3333 88.4718 75.3333C88.8433 75.3333 89.2032 75.3333 89.5515 75.3333C89.8998 75.3333 90.0507 75.3333 90.0043 75.3333Z" fill="%23fff"/%3E%3C/svg%3E%0A')
    no-repeat;
}
.cards:nth-child(4) {
  background: no-repeat
    url('data:image/svg+xml,%3Csvg width="138" height="152" viewBox="0 0 138 152" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 24C0 10.7452 10.7452 0 24 0H114C127.255 0 138 10.7452 138 24V128C138 141.255 127.255 152 114 152H24C10.7452 152 0 141.255 0 128V24Z" fill="%23E1E1E6"/%3E%3Cpath d="M49.7215 56.4211C49.7215 59.5158 50.4215 62.4263 51.8215 65.1526C53.2215 67.8789 55.1741 70.1509 57.6794 71.9684C57.4829 71.3789 57.3355 70.7772 57.2373 70.1632C57.139 69.5491 57.0899 68.9474 57.0899 68.3579C57.0899 66.786 57.3846 65.3123 57.9741 63.9368C58.5636 62.5614 59.4232 61.3088 60.553 60.1789L68.8794 52L77.2057 60.1789C78.3355 61.3088 79.1951 62.5614 79.7846 63.9368C80.3741 65.3123 80.6688 66.786 80.6688 68.3579C80.6688 68.9474 80.6197 69.5491 80.5215 70.1632C80.4232 70.7772 80.2759 71.3789 80.0794 71.9684C82.5846 70.1509 84.5373 67.8789 85.9373 65.1526C87.3373 62.4263 88.0373 59.5158 88.0373 56.4211C88.0373 53.7684 87.4723 51.1772 86.3425 48.6474C85.2127 46.1175 83.5916 43.7965 81.4794 41.6842C80.4478 42.4211 79.3671 42.9982 78.2373 43.4158C77.1074 43.8333 75.9776 44.0421 74.8478 44.0421C71.8513 44.0421 69.3706 43.0228 67.4057 40.9842C65.4408 38.9456 64.4583 36.3789 64.4583 33.2842V31.8105C62.1987 33.4316 60.1601 35.2246 58.3425 37.1895C56.525 39.1544 54.9776 41.2053 53.7004 43.3421C52.4232 45.4789 51.4408 47.6649 50.753 49.9C50.0653 52.1351 49.7215 54.3088 49.7215 56.4211ZM68.8794 58.1895L63.6478 63.3474C62.9601 64.0351 62.432 64.7965 62.0636 65.6316C61.6952 66.4667 61.5109 67.3754 61.5109 68.3579C61.5109 70.3719 62.2232 72.0789 63.6478 73.4789C65.0723 74.8789 66.8162 75.5789 68.8794 75.5789C70.9425 75.5789 72.6864 74.8789 74.1109 73.4789C75.5355 72.0789 76.2478 70.3719 76.2478 68.3579C76.2478 67.3754 76.0636 66.4667 75.6951 65.6316C75.3267 64.7965 74.7987 64.0351 74.1109 63.3474L68.8794 58.1895ZM68.8794 24V33.7263C68.8794 35.3965 69.4566 36.7965 70.6109 37.9263C71.7653 39.0561 73.1776 39.6211 74.8478 39.6211C75.732 39.6211 76.5548 39.4368 77.3162 39.0684C78.0776 38.7 78.753 38.1474 79.3425 37.4105L80.6688 35.7895C84.3039 37.8526 87.1776 40.7263 89.2899 44.4105C91.4022 48.0947 92.4583 52.0982 92.4583 56.4211C92.4583 63.0035 90.1741 68.5789 85.6057 73.1474C81.0373 77.7158 75.4618 80 68.8794 80C62.2969 80 56.7215 77.7158 52.153 73.1474C47.5846 68.5789 45.3004 63.0035 45.3004 56.4211C45.3004 50.1333 47.4127 44.0789 51.6373 38.2579C55.8618 32.4368 61.6092 27.6842 68.8794 24Z" fill="%23323238"/%3E%3C/svg%3E%0A');
}
.cards:nth-child(4).music-on {
  background: url('data:image/svg+xml,%3Csvg width="138" height="152" viewBox="0 0 138 152" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 24C0 10.7452 10.7452 0 24 0H114C127.255 0 138 10.7452 138 24V128C138 141.255 127.255 152 114 152H24C10.7452 152 0 141.255 0 128V24Z" fill="%2302799D"/%3E%3Cpath d="M94.1836 48.9667V75.3333C94.1836 76.5778 93.7657 77.6667 92.9298 78.6C92.0939 79.5333 91.1187 80 90.0043 80H48.1411C47.0266 80 46.0514 79.5333 45.2155 78.6C44.3797 77.6667 43.9617 76.5778 43.9617 75.3333V48.9667C42.6615 47.7222 41.8024 46.1926 41.3845 44.3778C40.9665 42.563 41.013 40.7481 41.5238 38.9333L44.519 28.4333C44.8905 27.0333 45.5406 25.9444 46.4693 25.1667C47.3981 24.3889 48.4661 24 49.6735 24H88.1932C89.4934 24 90.6312 24.4019 91.6063 25.2056C92.5815 26.0093 93.2549 27.0852 93.6264 28.4333L96.6912 38.9333C97.202 40.7481 97.2369 42.563 96.7957 44.3778C96.3545 46.1926 95.4838 47.7222 94.1836 48.9667ZM75.3765 46.5556C76.7232 46.5556 77.8609 46.063 78.7897 45.0778C79.7184 44.0926 80.0899 42.9 79.9042 41.5L78.1628 28.6667H71.1972V41.5C71.1972 42.8481 71.5919 44.0278 72.3813 45.0389C73.1708 46.05 74.1692 46.5556 75.3765 46.5556ZM62.3509 46.5556C63.6511 46.5556 64.754 46.063 65.6595 45.0778C66.5651 44.0926 67.0178 42.9 67.0178 41.5V28.6667H60.0522L58.3108 41.5C58.1251 42.8481 58.4501 44.0278 59.286 45.0389C60.1219 46.05 61.1435 46.5556 62.3509 46.5556ZM49.6735 46.5556C50.788 46.5556 51.7516 46.1278 52.5642 45.2722C53.3769 44.4167 53.8529 43.3667 53.9922 42.1222L55.8032 28.6667H48.8376L45.6335 40.0222C45.1691 41.6296 45.3548 43.1204 46.1907 44.4944C47.0266 45.8685 48.1875 46.5556 49.6735 46.5556ZM88.4718 46.5556C89.9578 46.5556 91.1304 45.8815 91.9894 44.5333C92.8485 43.1852 93.0459 41.6815 92.5815 40.0222L89.3773 28.6667H82.4118L84.2228 42.1222C84.3621 43.3667 84.8381 44.4167 85.6508 45.2722C86.4634 46.1278 87.4038 46.5556 88.4718 46.5556ZM48.1411 75.3333H90.0043V51.1444C90.0507 51.1963 89.8998 51.2222 89.5515 51.2222C89.2032 51.2222 88.8433 51.2222 88.4718 51.2222C87.3109 51.2222 86.208 50.95 85.1632 50.4056C84.1183 49.8611 83.0851 49.0185 82.0635 47.8778C81.3205 48.9148 80.3917 49.7315 79.2773 50.3278C78.1628 50.9241 76.9322 51.2222 75.5855 51.2222C74.1924 51.2222 72.9966 51.0019 71.9982 50.5611C70.9998 50.1204 70.0362 49.3815 69.1075 48.3444C68.4109 49.2778 67.5286 49.9907 66.4606 50.4833C65.3925 50.9759 64.1851 51.2222 62.8385 51.2222C61.3989 51.2222 60.1219 50.937 59.0074 50.3667C57.8929 49.7963 56.9409 48.9667 56.1515 47.8778C55.037 48.9667 53.9457 49.7963 52.8777 50.3667C51.8096 50.937 50.7416 51.2222 49.6735 51.2222C49.3484 51.2222 49.035 51.2222 48.7332 51.2222C48.4313 51.2222 48.234 51.1963 48.1411 51.1444V75.3333ZM90.0043 75.3333H48.1411C48.234 75.3333 48.4313 75.3333 48.7332 75.3333C49.035 75.3333 49.3484 75.3333 49.6735 75.3333C50.4629 75.3333 51.4033 75.3333 52.4946 75.3333C53.5858 75.3333 54.8048 75.3333 56.1515 75.3333C56.5694 75.3333 57.0338 75.3333 57.5446 75.3333C58.0554 75.3333 58.6011 75.3333 59.1815 75.3333C59.762 75.3333 60.3541 75.3333 60.9578 75.3333C61.5614 75.3333 62.1883 75.3333 62.8385 75.3333C63.3493 75.3333 63.8833 75.3333 64.4406 75.3333C64.9978 75.3333 65.555 75.3333 66.1123 75.3333C66.6695 75.3333 67.2036 75.3333 67.7144 75.3333C68.2252 75.3333 68.6896 75.3333 69.1075 75.3333C70.1291 75.3333 71.1507 75.3333 72.1724 75.3333C73.194 75.3333 74.3317 75.3333 75.5855 75.3333C76.2356 75.3333 76.8741 75.3333 77.501 75.3333C78.1279 75.3333 78.72 75.3333 79.2773 75.3333C79.8345 75.3333 80.3453 75.3333 80.8097 75.3333C81.2741 75.3333 81.692 75.3333 82.0635 75.3333C83.1315 75.3333 84.1996 75.3333 85.2677 75.3333C86.3357 75.3333 87.4038 75.3333 88.4718 75.3333C88.8433 75.3333 89.2032 75.3333 89.5515 75.3333C89.8998 75.3333 90.0507 75.3333 90.0043 75.3333Z" fill="%23fff"/%3E%3C/svg%3E%0A')
    no-repeat;

  background: no-repeat
    url('data:image/svg+xml,%3Csvg width="138" height="152" viewBox="0 0 138 152" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 24C0 10.7452 10.7452 0 24 0H114C127.255 0 138 10.7452 138 24V128C138 141.255 127.255 152 114 152H24C10.7452 152 0 141.255 0 128V24Z" fill="%2302799D"/%3E%3Cpath d="M49.7215 56.4211C49.7215 59.5158 50.4215 62.4263 51.8215 65.1526C53.2215 67.8789 55.1741 70.1509 57.6794 71.9684C57.4829 71.3789 57.3355 70.7772 57.2373 70.1632C57.139 69.5491 57.0899 68.9474 57.0899 68.3579C57.0899 66.786 57.3846 65.3123 57.9741 63.9368C58.5636 62.5614 59.4232 61.3088 60.553 60.1789L68.8794 52L77.2057 60.1789C78.3355 61.3088 79.1951 62.5614 79.7846 63.9368C80.3741 65.3123 80.6688 66.786 80.6688 68.3579C80.6688 68.9474 80.6197 69.5491 80.5215 70.1632C80.4232 70.7772 80.2759 71.3789 80.0794 71.9684C82.5846 70.1509 84.5373 67.8789 85.9373 65.1526C87.3373 62.4263 88.0373 59.5158 88.0373 56.4211C88.0373 53.7684 87.4723 51.1772 86.3425 48.6474C85.2127 46.1175 83.5916 43.7965 81.4794 41.6842C80.4478 42.4211 79.3671 42.9982 78.2373 43.4158C77.1074 43.8333 75.9776 44.0421 74.8478 44.0421C71.8513 44.0421 69.3706 43.0228 67.4057 40.9842C65.4408 38.9456 64.4583 36.3789 64.4583 33.2842V31.8105C62.1987 33.4316 60.1601 35.2246 58.3425 37.1895C56.525 39.1544 54.9776 41.2053 53.7004 43.3421C52.4232 45.4789 51.4408 47.6649 50.753 49.9C50.0653 52.1351 49.7215 54.3088 49.7215 56.4211ZM68.8794 58.1895L63.6478 63.3474C62.9601 64.0351 62.432 64.7965 62.0636 65.6316C61.6952 66.4667 61.5109 67.3754 61.5109 68.3579C61.5109 70.3719 62.2232 72.0789 63.6478 73.4789C65.0723 74.8789 66.8162 75.5789 68.8794 75.5789C70.9425 75.5789 72.6864 74.8789 74.1109 73.4789C75.5355 72.0789 76.2478 70.3719 76.2478 68.3579C76.2478 67.3754 76.0636 66.4667 75.6951 65.6316C75.3267 64.7965 74.7987 64.0351 74.1109 63.3474L68.8794 58.1895ZM68.8794 24V33.7263C68.8794 35.3965 69.4566 36.7965 70.6109 37.9263C71.7653 39.0561 73.1776 39.6211 74.8478 39.6211C75.732 39.6211 76.5548 39.4368 77.3162 39.0684C78.0776 38.7 78.753 38.1474 79.3425 37.4105L80.6688 35.7895C84.3039 37.8526 87.1776 40.7263 89.2899 44.4105C91.4022 48.0947 92.4583 52.0982 92.4583 56.4211C92.4583 63.0035 90.1741 68.5789 85.6057 73.1474C81.0373 77.7158 75.4618 80 68.8794 80C62.2969 80 56.7215 77.7158 52.153 73.1474C47.5846 68.5789 45.3004 63.0035 45.3004 56.4211C45.3004 50.1333 47.4127 44.0789 51.6373 38.2579C55.8618 32.4368 61.6092 27.6842 68.8794 24Z" fill="%23fff"/%3E%3C/svg%3E%0A');
}