.video-comunidades-content {
  width:100%;
  display:grid;
}

.video-comunidades {
  display: flex;
  width: var(--360-575-page-width, 360px);
  padding: var(--size-space-40, 40px) var(--360-575-page-margin, 16px) var(--size-space-64, 64px) var(--360-575-page-margin, 16px);
  flex-direction: column;
  align-items: center;
  gap: var(--size-space-32, 32px);
  justify-self: center;
  box-sizing: border-box
}

.video-comunidades__content {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: flex-start;
  position: relative;
  gap: var(--size-space-24, 24px);
}

.video-comunidades__video-modal {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: white;
}

.video-comunidades__video-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--Color-Background-General-Overlay, rgba(44, 44, 44, 0.20));
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
}

.video-comunidades__video-container.active {
  opacity: 1;
  pointer-events: auto;
}

.video-comunidades__video-modal.active {
  pointer-events: auto;
  animation: modalOpen 0.20s ease forwards;
}

.video-comunidades__video-modal.closing {
  animation: modalClose 0.20s ease forwards;
  pointer-events: none;
}

.video-comunidades__text-content {
  display: flex;
  padding: var(--size-space-0, 0);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--size-space-16, 16px);
  align-self: stretch;
}

.video-comunidades__title {
  margin: 0px;
  padding: 0px;
  color: var(--Color-Content-General-1, #2C2C2C);
  font-feature-settings: 'liga' off, 'clig' off;
}

.video-comunidades__description {
  margin: 0px;
  padding: 0px;
  color: var(--Color-Content-General-2, #707070);
  font-feature-settings: 'liga' off, 'clig' off;
}

.video-comunidades__video-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}

.video-comunidades__video-modal--active {
  transform: scale(1);
}

.video-comunidades__video {
  display: flex;
  padding: 0px 16px 40px 16px;
  box-sizing: border-box;
  min-width: 100%;
  width: 100%;
  height: 100%;
}

.video-iframe {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--border-radius-l, 16px);
}

.video-comunidades__close-modal {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding: var(--size-space-16, 16px);
  align-self: stretch;
  box-sizing: border-box;
}

.video-comunidades__close-button {
  background: none;
  border: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 9999px;
}

/*
  Video content
*/
.video-comunidades__video-thumbnail {
  position: relative;
  width: 100%;
  height: 200px;
}

.video-comunidades__image-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--border-radius-l, 16px);

  img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-height: 100%;
  }
}

.video-comunidades__play-button {
  position: absolute;
  border: none;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  transform: translate(-50%, -50%);
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;

  img {
    width: var(--Size-icons-s, 24px);
    height: var(--Size-icons-s, 24px);
  }

  &:hover {
    opacity: 0.8;

  }
}

.video-comunidades__link-content {
  display: flex;
  width: 100%;
  height: auto;
  justify-content: flex-start;
}

.video-comunidades__link-content--desktop {
  display: none;
}


.video-comunidades__link {
  display: flex;
  flex-direction: row;
  color: var(--Color-Content-Interactive-Active, #2F6852);
  text-decoration: underline;
  gap: var(--size-space-4, 4px);
  align-items: center;
  justify-content: flex-start;

  & img {
    width: var(--Size-icons-xs, 16px);
    height: var(--Size-icons-xs, 16px);
  }

}

@media (min-width: 576px) {
  .video-comunidades {
    width: var(--576-767-page-width, 576px);
    padding: var(--size-space-40, 40px) var(--576-767-page-margin, 42px) var(--size-space-64, 64px) var(--576-767-page-margin, 42px);
  }

  .video-comunidades__video-thumbnail {
    height: 250px;
  }

  .video-comunidades__video {
    padding: 0px 40px 40px 40px;

  }
}

@media (min-width: 768px) {
  .video-comunidades {
    width: var(--768-991-page-width, 768px);
    padding: var(--size-space-64, 64px) var(--768-991-page-margin, 48px);
  }
}


@media (min-width: 992px) {

  .video-comunidades {
    width: var(--992-1199-page-width, 992px);
    padding: var(--size-space-64, 64px) var(--992-1199-page-margin, 82px);
  }

  .video-comunidades__content {
    flex-direction: row-reverse
  }

  .video-comunidades__text-content {
    flex: 1 0 0;
    justify-content: center;
    gap: var(--size-space-16, 16px);
  }

  .video-comunidades__link-content--mobile {
    display: none;
  }

  .video-comunidades__link-content--desktop {
    display: flex;
  }

  .video-comunidades__video-content {
    flex: 1 0 0;
  }

  .video-comunidades__video-modal {
    width: 828px;
    height: 720px;
  }


  .video-comunidades__video-thumbnail {
    height: 300px;
    box-sizing: border-box;
    padding-right: var(--size-space-8, 8px);

  }

  .video-comunidades__link-content--desktop {
    margin-top: calc(24px - 16px);
  }

}

@media (min-width: 1200px) {

  .video-comunidades {
    width: var(--1200-1399-page-width, 1200px);
    padding: var(--size-space-64, 64px) var(--1200-1399-page-margin, 102px);
  }
}

@media (min-width: 1920px) {

  .video-comunidades {
    width: var(--14001920-page-width, 1920px);
    padding: var(--size-space-64, 64px) var(--14001920-page-margin, 324px);
  }

  .video-comunidades__video-modal {
    width: 1056px;
    height: 720px;
  }

}

@keyframes modalOpen {
  from {
    opacity: 0;
    transform: scale(0.8);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes modalClose {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(0.8);
  }
}

@media (prefers-reduced-motion: reduce) {
  .video-comunidades__video-modal {
    animation: none !important;
    transition: none !important;
  }
}