.showcases {
  padding-top: 80px;
  padding-bottom: 80px;
  text-align: center;
  overflow-x: hidden;

  @media screen and (width >= 768px) {
    padding-top: 160px;
    padding-bottom: 160px;
  }
}

.showcases-name {
  position: relative;
  color: var(--r-primary-600);

  &::before,
  &::after {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    transform: translate(-50%, -50%);
    opacity: 0.08;
    z-index: -1;
  }

  &::before {
    left: -40px;
    top: -20px;
    border-radius: 50% 10% 30% 25% / 35% 20% 70% 80%;
    background-color: var(--r-primary-700);
    box-shadow: 0 0 80px 100px var(--r-primary-700);
  }

  &::after {
    right: -200px;
    bottom: -140px;
    border-radius: 10% 25% 15% 80% / 60% 20% 25% 50%;
    background-color: var(--r-neutral-700);
    box-shadow: 0 0 80px 100px var(--r-neutral-700);
  }
}

.showcases-btns {
  display: grid;
  gap: 20px;
  justify-content: center;
  margin-top: 32px;

  @media screen and (width >= 768px) {
    grid-auto-flow: column;
  }
}

.showcases-btn {
  --main-color: var(--r-neutral-900);
  display: block;
  text-decoration: none;
  border-radius: 6px;
  border: 2px solid var(--main-color);
  color: inherit;
  padding: 8px 32px;
  font-weight: 700;
  transition:
    background-color 0.2s,
    color 0.2s;

  &:hover {
    background-color: var(--main-color);
    color: var(--r-neutral-100);
  }
}

.showcases-btn_primary {
  --main-color: var(--r-primary-700);
}

.showcases-list {
  display: grid;
  gap: 24px;
  margin-top: 120px;

  @media screen and (width >= 1080px) {
    grid-template-columns: repeat(3, 1fr);
  }
}

.showcases-card {
  position: relative;
  display: block;
  border-radius: 12px;
  text-decoration: none;
  background-color: var(--r-neutral-50);
  padding: 16px;
  color: inherit;
  text-align: left;
  filter: grayscale(0.5);
  transition: background-color 0.2s;

  &:hover {
    filter: grayscale(0);
    background-color: var(--r-neutral-100);
  }
}

.showcases-img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.showcases-product {
  margin: 24px 12px 12px;
  line-height: 1;
  font-size: 1.25em;
}

.showcases-product-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 6px 10px;
  background-color: var(--r-neutral-100);
  backdrop-filter: opacity(0.4);
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;
}
