@use '../../utils' as *;

.medilix-video {
    margin-top: -240px;
    
    &__media {
        position: relative;
        z-index: 1;
        overflow: hidden;
        @include border-radius(20px);
        border: 10px solid var(--rr-common-white);
        border-bottom: none;
    
        @media #{$md, $sm, $xs} {
            height: 400px;
        }
    
        img {
            @media #{$md, $sm, $xs} {
              width: 100%;
              height: 100%;
              object-fit: cover;
          }
        }
    
        .popup-video {
          z-index: 2;
          top: calc(50% - 60px);
          left: calc(50% - 60px);
          @include border-radius(500px);
          overflow: hidden;
          display: flex;
          align-items: center;
          justify-content: center;
          position: absolute;
          width: 120px;
          color: var(--rr-common-white);
          height: 120px;
          background: var(--rr-theme-green);
          font-size: 55px;
    
          @media #{$md, $sm, $xs} {
            width: 80px;
            height: 80px;
            font-size: 38px;
            text-indent: 7px;
          }
    
          &:hover {
            background-color: var(--rr-color-900);
          }
    
          i {
            text-indent: 11px;
          }
        }
      }
}