@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Lexend+Deca&display=swap');

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

body{
    font-family: 'Inter', sans-serif;
    font-family: 'Lexend Deca', sans-serif;
    background-color: hsl(233, 47%, 7%);
}

.container{
    background-color: hsl(244, 38%, 16%);
    max-width: 1110px;
    max-height: 447px;
    margin: 177px auto 166px auto;
    border-radius: 15px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
}

.left{
    margin-left: 73px;
    margin-top: 66px;
    margin-bottom: 66px;
    margin-right: 122px;
}
.title{
    font-size: 36px;
    color: #fff;
    margin-bottom: 32px;
    font-weight: 700;
}
span{
    color: hsl(277, 64%, 61%);
}
.subtext{
    font-size: 14px;
    color: hsla(0, 0%, 100%, 0.6);
    margin-bottom: 80px;
}

.bottom{
    display: flex;
    flex-direction: row;
}

.b-center{
    margin-right: 65px;
    margin-left: 67px;
}

.num{
    font-size: 20px;
    color: hsla(0, 0%, 100%, 0.75);
    margin-bottom: 13px;
}
.text{
    font-size: 12px;
    color: hsla(0, 0%, 100%, 0.6);
    text-transform: uppercase;
}

.right{
    background-color: hsl(277, 64%, 61%);
}
img{
    opacity:0.6;
}

@media only screen and (max-width: 375px) {

    body{
        background-position: right 48vw bottom 40vh, left 45vw top 39vh;
    }
    .container{
    max-width: 323px;
    max-height: 786px;
    margin: 86px auto 87px auto;
    border-radius: 15px;
    overflow: hidden;
    display: flex;
    flex-direction: column-reverse;
    }
    .right{
        max-height: 266px;
    }

    img{
        width: 100%;
        overflow: hidden;
        opacity: 0.6;
        
    }
    .left{
        margin-left: 35px;
        margin-top: 44px;
        margin-bottom: 0px;
        margin-right: 35px;
        text-align: center;
    }
    .title{
        font-size: 27px;
        margin-bottom: 22px;
    }
    .subtext{
        margin-bottom: 29px;
    }
    .bottom{
        flex-direction: column;
    }
    .num{
        margin-bottom: 14px;
    }
    .text{
        margin-bottom: 33px;
    }
    .btext{
        margin-bottom: 33px;
    }

   }