.container {
    position: relative;
    height: 65vh;
    min-height: 500px;
    overflow: hidden;
    user-select: none;
    margin-bottom: 80px;
}
.img {
    height: 100%;
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
        rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
        scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
    transition-duration: 200ms;
    background: rgb(17, 17, 17);
    z-index: 20;
}
.img:hover {
    --tw-scale-x: 1.1;
    --tw-scale-y: 1.1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
        rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
        scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.content {
    color: #fff;
    font-family: "Public Sans", sans-serif;
    position: absolute;
    bottom: 2.5rem /* 40px */;
    width: 100%;
    bottom: 20px;
    padding: 0px 1.5rem;
    text-align: center;
}
.heading {
    font-weight: 700;
    font-size: 1.125rem /* 18px */;
    line-height: 1.75rem /* 28px */;
    text-transform: uppercase;
    margin-bottom: 1rem /* 16px */;
    letter-spacing: 0.1em;
}
.p {
    text-transform: uppercase;
    font-size: 0.75rem /* 12px */;
    line-height: 1rem /* 16px */;
    margin-bottom: 0.25rem /* 4px */;
    font-weight: 300;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
}
.img_background {
    position: absolute;
    top: 0px;
    width: 50%;
    height: 100%;
}
.shaan {
    left: 0px;
    background: linear-gradient(90deg, rgba(17, 17, 17, 0), rgba(17, 17, 17, 1)),
        url("/static/images/5/banner.webp");
    background-repeat: no-repeat;
    background-position: right;
    background-size: cover;
}
.ganesh {
    right: 0px;
    background: linear-gradient(90deg, rgba(17, 17, 17, 1), rgba(17, 17, 17, 0)),
        url("/static/images/9/banner.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

@media screen and (max-width: 750px) {
    .ganesh {
        display: none;
    }
    .img_background {
        width: 100%;
    }
    .shaan {
        background: linear-gradient(
                180deg,
                rgba(17, 17, 17, 0),
                rgba(17, 17, 17, 1)
            ),
            url("/static/images/5/banner.webp");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 75%;
    }
}