.c62-gradient {
  background: linear-gradient(0deg, #000000 0%, rgba(0,0,0,0) 100%);
}

.c62-desktop-container {
  height: 662px;
}

.c62-desktop-item {
  position: relative;
  transition: all .5s;
}

.c62-desktop-item.c62-collapsed {
  height: 270px;
}

.c62-desktop-item.c62-expanded {
  height: 360px;
  transition: all .7s;
}

.c62-desktop-item.c62-expanded:nth-child(n+3) {
  margin-top: -90px;
}

.c62-desktop-item.c62-expanded:nth-child(-n+2) {
  margin-top: 0;
}

.c62-desktop-item.c62-expanded:hover .c62-overlay {
  transition: all 0.5s;
  opacity: 0.9;
}

.c62-info.c62-expanded .title::after {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  display: block;
  --bg-opacity: 1;
  background-color: #8ad74a;
  background-color: rgba(138, 215, 74, var(--bg-opacity));
  content: '';
  height: 0.188rem;
  width: 2.5rem;
}

.c62-info.c62-expanded .title {
  --text-opacity: 1;
  color: #fff;
  color: rgba(255, 255, 255, var(--text-opacity));
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.c62-info.c62-collapsed .title {
  --text-opacity: 1;
  color: #fff;
  color: rgba(255, 255, 255, var(--text-opacity));
  font-size: 1.875rem;
  letter-spacing: 0;
}

.c62-info.c62-collapsed .description,
.c62-info.c62-collapsed .cta {
  transition: all 0.5s;
  height: 0;
  margin-bottom: 0;
  opacity: 0;
  overflow: hidden;
}

.c62-info.c62-expanded .description,
.c62-info.c62-expanded .cta {
  transition: all 0.5s;
  margin-bottom: 1rem;
  opacity: 1;
  height: auto;
}

.c62-info.c62-expanded p {
  --text-opacity: 1;
  color: #fff;
  color: rgba(255, 255, 255, var(--text-opacity));
  font-size: 1.25rem;
}

.c62-info .cta a {
  --text-opacity: 1;
  color: #fff;
  color: rgba(255, 255, 255, var(--text-opacity));
}

.c62-mobile-header img {
  transition: max-height 500ms;
}

.c62-mobile-info {
  transition: opacity 500ms;
}

.c62-mobile-header.c62-collapsed img {
  max-height: 90px;
}

.c62-mobile-header.c62-expanded img {
  max-height: 200px;
}

.c62-mobile-header.c62-expanded svg {
  transition: all 0.5s;
  margin-right: 0;
  max-width: 0;
  transform: rotateX(0deg);
}

.c62-mobile-header.c62-collapsed svg {
  transition: all 0.5s;
  margin-right: 0.5rem;
  max-width: 100%;
  transform: rotate(90deg);
}

.c62-mobile-header.c62-collapsed .title {
  --text-opacity: 1;
  color: #fff;
  color: rgba(255, 255, 255, var(--text-opacity));
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  transition: all 0.5s;
}

.c62-mobile-header.c62-expanded .title {
  --text-opacity: 1;
  color: #fff;
  color: rgba(255, 255, 255, var(--text-opacity));
  font-size: 1.5rem;
  letter-spacing: 0;
  transition: all 0.5s;
}

.c62-mobile-info.c62-collapsed {
  opacity: 0;
  height: 0;
  overflow: hidden;
}

.c62-mobile-info.c62-expanded {
  opacity: 1;
  height: auto;
}

.c62-mobile-overlay {
  background: linear-gradient(0deg, #000000 1.23%, rgba(0, 0, 0, 0.0001) 102.03%);
  mix-blend-mode: multiply;
  opacity: 0.3;
}