.container.gradient-1
  .gradient-1.max-size

  .title Hello

html,
body {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  min-height: 640px;
}

.container {
  width: 320px;
  height: 600px;
  border-radius: 1em;
  box-shadow: 0 0 1em rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  padding: 1em;
  color: white;
  position: relative;
  overflow: hidden;

  .title {
    font-size: 1.4rem;
    font-weight: bold;
    text-align: center;
  }
}

.gradient-1 {
  $firstColor: #9167f7;
  $secondColor: pink;

  position: relative;
  background: linear-gradient(to bottom right, $firstColor, $secondColor);

  &:hover {
    &::before {
      transform: scale(1.4);
    }
  }

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: all 0.5s ease-in-out;
    transform-origin: top right;

    $transparentColor: #ffffff00;
    $whiteColor: #ffffff22;

    background: radial-gradient(
        circle at top right,
        $transparentColor 0,
        $whiteColor 15%,
        $transparentColor 15%,
        $whiteColor 25%,
        $transparentColor 25%,
        $whiteColor 35%,
        $transparentColor 35%,
        $whiteColor 45%,
        $transparentColor 45%,
        $whiteColor 55%,
        $transparentColor 55%
      ),
      radial-gradient(
        circle at top right,
        $transparentColor 55%,
        $whiteColor 65%,
        $transparentColor 65%,
        $whiteColor 75%,
        $transparentColor 75%,
        $whiteColor 85%,
        $transparentColor 85%,
        $whiteColor 95%,
        $transparentColor 95%,
        $whiteColor 100%,
        $transparentColor 100%
      );
  }
}