:root {
  --main-font: "Inter", sans-serif;
  --main-font-wght-normal: 410;
  --main-font-wght-bold: 715;
  --accent-font: "PressStart2P", fantasy;
  --accent-color: #000;
  --block-width: clamp(375px, 100vw, 700px);
  --logo-font-size: clamp(49px, 13vw, 65px);
  --title-font-size: clamp(14px, 3vw, 23px);
  --card-img-size: clamp(371px, 100vw, 698px);
  --header-padding: clamp(122px, 32vw, 130px) clamp(16px, 4vw, 122.5px);
  --btn-border: 2px #000 solid;
  --popup-inline-size: clamp(341px, 90vw, 353px);
  --heart-contour-color: #000;
  --heart-core-color: #fff;
  --heart-main-color: red;
  --sparks-color: red;
  --gradient: repeating-linear-gradient(
      to right,
      rgb(211 211 211/ 1) 0px 2px,
      rgb(211 211 211/ 0) 2px 4px
    ),
    repeating-linear-gradient(
      to bottom,
      rgb(211 211 211/ 1) 0px 2px,
      rgb(211 211 211/ 0) 2px 4px
    ),
    linear-gradient(to bottom, #e7e7e7 0.01%, #1a1a1a);
  --card-border: 2px #000 solid;
  --label-text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
  --label-text-stroke: 1px #fff;
}

.like-icon:hover {
  --heart-core-color: #000;
  --heart-main-color: #000;
}

.like-icon:active {
  --heart-main-color: red;
  --heart-core-color: red;
}

.like-icon.is-liked {
  --heart-contour-color: red;
  --heart-core-color: red;
  --heart-main-color: red;
}