@media (min-width: 768px) {
  .phearum-banner-part-right {
    padding-top: 2rem;
  }

  .phearum-banner.height-medium {
    min-height: 400px;
  }
}

/* Heading styles */

.banner-heading-title {
  line-height: 1.3;
  margin-bottom: 0.5rem;
  font-size: 3.25rem;
  font-weight: 800;
}

.banner-sub-heading-title {
  font-size: 1.5rem;
  font-weight: 600;
}

/* Banner Block Styles */

.phearum-banner {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phearum-banner-media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 1;
}

.phearum-banner-media iframe {
  width: 1512px;
  height: 850.5px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.phearum-banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.object-image-size img {
  width: 100%;
  max-width: 320px;
  height: auto;
  display: inline-block;
  vertical-align: middle;
}

.phearum-banner-content {
  position: relative;
  z-index: 3;
  max-width: 800px;
  padding: 2rem;
}

/* Height variants */

.phearum-banner.height-small {
  min-height: 300px;
}

.phearum-banner.height-medium {
  min-height: 500px;
}

.phearum-banner.height-large {
  min-height: 700px;
}

.phearum-banner.height-xl {
  min-height: 900px;
}

.phearum-banner.height-fullscreen {
  min-height: 100vh;
}

/* Animation classes */

.banner-animate-fadeInUp {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.8s ease-out forwards;
}

.banner-animate-fadeInDown {
  opacity: 0;
  transform: translateY(-30px);
  animation: fadeInDown 0.8s ease-out forwards;
}

.banner-animate-fadeInLeft {
  opacity: 0;
  transform: translateX(-30px);
  animation: fadeInLeft 0.8s ease-out forwards;
}

.banner-animate-fadeInRight {
  opacity: 0;
  transform: translateX(30px);
  animation: fadeInRight 0.8s ease-out forwards;
}

.banner-animate-scaleIn {
  opacity: 0;
  transform: scale(0.9);
  animation: scaleIn 0.8s ease-out forwards;
}

.banner-animate-slideInUp {
  opacity: 0;
  transform: translateY(50px);
  animation: slideInUp 0.8s ease-out forwards;
}

/* Animation keyframes */

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* YouTube embed responsive */

.phearum-banner-youtube {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  /* 16:9 aspect ratio */
}

.phearum-banner-youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Video element styling */

.phearum-banner video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Button styling */

.phearum-banner-button {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  margin-top: 1.5rem;
  font-size: 1rem;
  color: hsl(var(--color-surface));
  background-color: hsl(var(--color-primary));
  padding: 1.5em 2.75em 1.5em 2.75em;
  border-radius: 40px 40px 40px 40px;
}

.phearum-banner-button:hover {
  background-color: hsl(var(--color-secondary));
  color: hsl(0 0 100);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px hsl(24deg 83% 28% / 0.4);
}

/* Responsive design */

@media (max-width: 768px) {
  .phearum-banner-content {
    padding: 1.5rem;
  }

  .phearum-banner.height-fullscreen {
    min-height: 60vh;
  }

  .phearum-banner.height-xl {
    min-height: 600px;
  }

  .phearum-banner.height-large {
    min-height: 500px;
  }
}

@media (max-width: 480px) {
  .phearum-banner-content {
    padding: 1rem;
  }

  .phearum-banner.height-large,
    .phearum-banner.height-xl {
    min-height: 400px;
  }

  .phearum-banner.height-fullscreen {
    min-height: 50vh;
  }
}