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

body{
    font-family: 'Inter', sans-serif;
    background-color: #fcf5ef;
    color: #032539;
}
.main{
    padding: 1rem;
}
img{
    width: 100%;
}
.header{
    height: 100vh;
    background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url(../assets/images/bg.jpg);
    background-size: cover;
}   
.logo{
    filter: brightness(0) invert(1);
}

.fa-solid{
    color: #6DB5CA;
    top: 0;
    right: 0;
    transform: translate(-20%,20%);
    position: fixed;
}

.popular__movies{
    color: #555;
    background-color: #b8d8e0;
}
.popular__movies h3{
    color: #222;
}
.btn-xs{
    color: #fff;
    background-color: #6DB5CA;
    border: none;
}
.btn-xs:hover{
    background-color: #1c768F;
}
.movie-container__front-title{
    border-radius: 0 0 10px 10px;
    padding: 1rem;
    width: 100%;
    background-color: #f8e8da;
    color: #002c3e;
}
.movie-container__front img{
    border-radius: 10px 10px 0 0;
}
.carousel{
    border-radius: 10px;
}

.btn-secondary{
    background-color: #6DB5CA;
    color: #FCF5EF;
}
.btn-secondary:hover{
    background-color: #1c768F;
}
.main-heading{
    color: #FCF5EF;
    font-size: 1.875rem;
    font-weight: 300;
    text-transform: uppercase;
    line-height: 1;
}
.sub-heading{
    position: relative;
}
.sub-heading::after{
    content: '';
    position: absolute;
    width: 4rem;
    border-bottom: 1px solid #032539;
    bottom: 0;
    transform: translateY(.5rem);
}
.input{
    width: 50%;
    position: absolute;
    left: 49%;
    border-color: #6DB5CA;
    transform: translateY(30%);
    color: #fcf5ef;
}
.carousel-item{
    display: grid;
}
.discover__movie-container{
    overflow: hidden;
}
.carousel-item img{
    width: 100%;
}
@media (min-width: 48em) {
    .input{
        visibility: visible;
        left: 40%;
        top: 0;
    }
    .fa-solid{
        top: 1%;
    }
    .movie-container__front-title{
        width: 70%;
    }
.carousel-item{
    grid-template-columns: 1fr 1fr;
}
.discover__movie-container img{
    width: 70%;
}
.carousel-item img{
    width: 60%;
}
}