/* =========================
   BANNER CONTAINER
========================= */

.bannerButtonsContainer {
  gap: 0.5rem;
}

/* =========================
   BUTTON WRAPPER
========================= */

.bannerButtonsContainer .buttons {
  display: flex;
  gap: 0.5rem;
}

/* =========================
   DOWNLOAD BUTTON
========================= */

.bannerButtonsContainer .buttons .downloadButton {
  height: 4.75rem;
  width: 14.25rem;
  object-fit: cover;
  border-radius: 0.4375rem;
  display: block;
}

/* =========================
   ROTATING BORDER
========================= */

.rotating-border {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  display: inline-block;
}

/* Rotating conic gradient */

.rotating-border::before {
  content: "";
  position: absolute;

  height: 1000%;
  width: 1000%;

  left: -450%;
  top: -450%;

  background-image: conic-gradient(
    rgba(255, 215, 0, 0.6) 20deg,
    transparent 100deg
  );

  animation: rotateBorder 6s linear infinite;
}

/* Inner content layer */

.rotating-border > * {
  position: relative;
  z-index: 2;

  margin: 1px;

  background: #1c1b29;

  border-radius: 0.5rem;

  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 1.25rem 2.1875rem rgba(0, 0, 0, 0.3);
}

/* =========================
   ANIMATION
========================= */

@keyframes rotateBorder {
  100% {
    transform: rotate(-360deg);
  }
}