.Serin {
  grid-column: span 2;

  aspect-ratio: 1/1;
  border: 0.1rem solid #0000000a;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04)),
    linear-gradient(0deg, #f8f7f9, #f8f7f9);
  box-shadow: 0px 0.4rem 0.8rem 0px #0000000a;
  border-radius: 3.2rem;
  position: relative;
}

.Serin > .background {
  position: absolute;
  inset: 0;
  border-radius: 3.2rem;
  overflow: hidden;

  will-change: opacity;
  transition: opacity 0.3s ease-in-out;
}

.Serin:hover > .background {
  opacity: 0;
}

.Serin > .background > img {
  min-height: 100%;
  min-width: 100%;
  object-fit: cover;
}

.Serin > .gradient {
  overflow: hidden;
  inset: 0;
  border-radius: 3.2rem;
  position: absolute;
}

.Serin > .gradient > div {
  background: linear-gradient(
    180deg,
    rgba(249, 247, 250, 0) -275%,
    rgb(248, 247, 249) 100%
  );
  inset: -280px 0 0;
  position: absolute;
}

.Serin > .overlay {
  position: absolute;
  overflow: hidden;
  inset: 0;
  z-index: 2;
}

.Serin > .overlay > .phone-container {
  position: absolute;
  left: calc(50% - 10rem);
  transform-origin: center center;
  bottom: -22.9rem;
  height: 40.6rem;
  width: 20rem;
  transform: translateY(0);

  will-change: transform;
  transition: transform 0.3s ease-in-out;
}

.Serin:hover > .overlay > .phone-container {
  transform: translateY(-14rem);
}

.Serin > .overlay > .phone-container > img.phone {
  height: 100%;
  position: relative;
}

.Serin > .overlay > .phone-container > .components {
  position: absolute;
  inset: 0;
  margin: 1.1rem 1.1rem 1.2rem;
  border-radius: 2rem;
  overflow: auto;
}

.Serin > .overlay > .phone-container > .components > img {
  width: 100%;
}

@media screen and (max-width: 1200px) {
  .Serin {
    grid-column: span 3;
    aspect-ratio: auto;
    height: 32rem;
    grid-row: 5 / 6;
  }

  .Serin > .background {
    will-change: unset;
    transition: unset;
  }

  .Serin:hover > .background {
    opacity: unset;
  }

  .Serin > .overlay > .phone-container {
    left: 4.9rem;
    bottom: -11.5rem;
    transform: rotate(15deg);

    will-change: unset;
    transition: unset;
  }

  .Serin:hover > .overlay > .phone-container {
    left: 4.9rem;
    bottom: -11.5rem;
    transform: rotate(15deg);
  }
}