@use "../abstracts/" as *;

.about {
  .about-content-banner {
    aspect-ratio: 16/9;
    width: 100%;
    position: relative;
    > img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .video-btn{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 70px;
      height: 70px;
      border-radius: $radius-rounded;
      background-color: $color-white;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: 0.3s ease-in-out;
      &:hover {
        background-color: $color-primary;
        box-shadow: 0 4px 20px rgba($color-dark, 0.1);
      }
      >i {
        font-size: 36px;
        color: $text-primary;
      }
    }
  }
}