.btn-with-circle {
  width: 275px;
  height: 180px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  position: relative;
  display: flex;
  align-items: center;
}
.btn-red-circle-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 165px;
  height: 165px;
}
.btn-red-circle {
  width: 150px;
  height: 150px;
  border-radius: 100%;
  background-color: var(--color-red);
  transition: all 0.2s ease-in-out;
}
.btn-with-circle:hover .btn-red-circle {
  width: 165px;
  height: 165px;
  left: 0;
}
.btn-body {
  width: 185px;
  left: calc(165px / 2);
  position: absolute;
  z-index: 1;
}
.btn-content {
  display: flex;
  align-items: center;
}
.btn-content p {
  color: var(--color-grey);
  font: var(--font-c2);
  margin-right: 1px;
  transition: all 0.2s ease-in-out;
}
.btn-with-circle:hover .btn-content p {
  margin-right: 10px;
}

.btn-content img {
  width: 24px;
  height: 24px;
}

.btn-with-circle:active .btn-red-circle {
  opacity: 0.8;
}

@media screen and (max-width: 640px) {
  .btn-red-circle-wrapper {
    width: 125px;
    height: 125px;
  }
  .btn-red-circle {
    width: 110px;
    height: 110px;
  }
  .btn-with-circle:hover .btn-red-circle {
    width: 125px;
    height: 125px;
  }
  .btn-body {
    width: 185px;
    left: calc(125px / 2);
  }
}