body{
    font-family: "Poppins", sans-serif;
    background: #272044;
}
.container{
    max-width: 1400px;
    margin: 0 auto;
}
.text-center{
    text-align: center;
}
.grid{
    display: grid;
    grid-gap: 64px;
}
.img-responsive{
    width: 100%;
    display: block;
}
.grid-2-columns{
    grid-template-columns: 1fr 1fr;
}
.grid-3-columns{
    grid-template-columns: 1fr 1fr 1fr;
}
.grid-3-columns-with-first-narrow{
    grid-template-columns: 1fr 1fr 1fr;
}
.embed{
    width: 100%;
    aspect-ratio: 1/1;
}
        .box{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-gap:64px;
            padding-top: 20px;
            
        }
        .film{
            width: 100%;
            aspect-ratio: 1/1;
            margin: 0 auto;
        }
                @media(max-width:900px){
            .box{
                grid-template-columns: 1fr;

            }
        }
        .card{
            background: white;
            margin:30px 0 ;
        }
        .card-header-grid{
            grid-gap: 0;
        }
        .card-body{
            padding: 30px ;
        }
        .card-footer{
            padding: 0 30px 30px;
        }
        .btn{
            display: block;
            color: white;
            font-weight: 700;
            font-size: 14px;
            line-height: 21px;
            text-align: center;
            letter-spacing: 3px;
            text-transform: uppercase;
            padding: 16px;
            background-color: #462cb3;
            text-decoration: none;

        }
        section{
            max-width: 100%;
            margin: 0 auto;
            padding: 100px;
        }
        section.secondary{
            background: #f8f8f8;
        }
        header{
            background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("image/fifth\ day\ of\ creation.jpg");
            background-repeat: no-repeat;
            background-size: cover;
            color: white;
            text-align: center;
            padding: 200px 0;
        }
        header h1{
            font-weight: 700;
            font-size: 96px;
            line-height: 1;
            margin: 30px 0;
        }
        header h2{
            font-weight: 400;
            font-size: 40px;
            line-height: 1.5;
            margin: 0;
        }
        header h3{
            font-weight: 900;
            font-size: 24px;
            line-height: 1.5;
            letter-spacing: 5px;
            margin: 0;
        }
        header a {
            font-weight: 700;
            font-size: 14px;
            line-height: 1.5;
            text-align: center;
            color: #272044;
            padding: 16px 32px;
            margin-top: 32px;
            display: inline-block;
            letter-spacing: 3px;
            text-decoration: none;
            text-transform: uppercase;
            background: white;
        }
        main{
            background-color: white;
        }
        main h2{
            font-weight: 600;
            font-size: 16px;
            line-height: 1.5;
            margin: 0;
            letter-spacing: 5px;
            color: #272044;
            opacity: 0.3;
            text-transform: uppercase;
        }
        main h3{
            font-weight: 600;
            font-size: 40px;
            line-height: 1.5;
            color: #272044;
            margin: 0;
        }
        main h4{
            font-weight: 600;
            font-size: 24px;
            line-height: 1;
            color: #272044;
            margin: 0;
        }
        main h5{
            font-weight: 600;
            font-size: 13px;
            margin: 0;
            line-height: 1;
            color: #272044;
        }
        main p {
            font-style: normal;
            font-weight: 300;
            font-size: 16px;
            line-height: 1.5;
            color: #272044;
            opacity: 0.7;
        }
        footer{
            color: white;
                        background-image: linear-gradient(rgba(39, 32, 68, 0.9), rgba(39, 38, 68, 0.9)), url("image/fifth\ day\ of\ creation.jpg");
            background-repeat: no-repeat;

            background-size:cover;

        }
        footer h3{
            font-weight: 600;
            font-size: 20px;
            line-height: 30px;
        }
        footer p {
            font-weight: 300;
            font-size: 16px;
            opacity: 0.7;
            line-height: 24px;
        }
        footer ul{
            padding: 0;
        }
        footer li{
            list-style: none;
            margin: 0;
            padding: 0;
        }
        footer a{
            color: white;
            opacity: 0.7;
        }
        @media (max-width:960px) {
            header{
                padding: 60px 0;
            }
            header h1{
                font-size: 48px;
            }
            header h2{
                font-size: 20px;
            }
            header h3{
                font-size: 12px;
            }
            .grid{
                grid-template-columns: 1fr;
                grid-gap: 32px;
            }
            section{
                padding: 30px;
            }
            .card-header img{
                display: none;
            }
            embed{
                aspect-ratio: 16/9;
            }
            
        }
        .gridi{
            display: grid;
            grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
            grid-gap: 20px;
            align-items: stretch;
        }
        .gridi img{
            border: 1px solid #ccc;
            box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
            max-width: 100%;
        
        }