* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #f64c4c;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; 
}

.image-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.landing-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;


    -webkit-mask-image: radial-gradient(
        ellipse at center, 
        black 20%, 
        rgba(0, 0, 0, 0.8) 50%, 
        rgba(0, 0, 0, 0) 80%
    );
    mask-image: radial-gradient(
        ellipse at center, 
        black 20%, 
        rgba(0, 0, 0, 0.8) 50%, 
        rgba(0, 0, 0, 0) 80%
    );
}
.landing-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;

    -webkit-mask-image: 
        linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%),
        linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
    mask-image: 
        linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%),
        linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
    

    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}