child.css

* {
    box-sizing: border-box;
}

body,
html {
    margin: 0%;
}

@font-face {
    font-family: circular-black;
    src: url(assets/Fonts/CircularStd-Black.otf);
}

@font-face {
    font-family: circular-medium;
    src: url(assets/Fonts/CircularStd-Medium.otf);
}

@font-face {
    font-family: circular-bold;
    src: url(assets/Fonts/CircularStd-Bold.otf);
}

@font-face {
    font-family: circular-book;
    src: url(assets/Fonts/CircularStd-Book.otf);
}


.container {
    display: grid;
    grid-template-columns: 122px 139px 2.5fr 1.3fr 2.5fr 25px 90px 4fr;
    grid-template-rows: 215px 80px 64px 64px 2.5fr 64px 2fr;
    width: 100%;
    height: 100vh;
    grid-template-areas:

        "a a a a a b b c"
        "a a a a a d e c"
        "f g h h h d e c"
        "i i i j k l l c"
        "i i i m n n n o"
        "i i i q n n n o"
        "i i i p n n n o";
}

.section2 {
    display: grid;
    height: 100vh;
    width: 100%;
    background-color: white;
}


.contenthead {
    height: 100%;
    overflow: hidden;
}

.img {
    width: 100%;
    object-fit: cover;
    height: 100%;
}

.box {
    background-color: yellow;
}

.box1 {
    background-color: white;
    grid-area: a;
}

.box2 {
    background-color: #FFBB06;
    grid-area: b;
}

.box3 {
    background-color: #3B3B3B;
    grid-area: c;
}

.box4 {
    background-color: black;
    grid-area: d;
}

.box5 {
    background-color: #FF1100;
    grid-area: e;
}

.box6 {
    background-color: #FF1100;
    grid-area: f;
}

.box7 {
    background-color: #0022DD;
    grid-area: g;
}

.box8 {
    background-color: white;
    grid-area: h;
}

.box9 {
    background-color: black;
    grid-area: i;
}

.box10 {
    background-color: black;
    grid-area: j;
}

.box11 {
    background-color: white;
    grid-area: k;
}

.box12 {
    background-color: #0022DD;
    grid-area: l;
}

.box13 {
    background-color: black;
    grid-area: q;
}

.box14 {
    background-color: #FFBB06;
    grid-area: m;
}

.box15 {
    background-color: #FF1100;
    grid-area: n;
}

.box16 {
    background-color: black;
    grid-area: o;
}

.box17 {
    background-color: #0022DD;
    grid-area: p;
}

/* .........Slider.................................................................*/

.main {
    max-width: 100%;
    height: 100%;
}

.cd-slider {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.cd-slider li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
    /* ......image background holding time......... */
    transition: visibility 4s 0s ease-out;
    will-change: visibility;
}

.image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: 50% 50%;
    clip: rect(0, 80rem, 50rem, 80rem);
    transition: 2s clip 0s ease-out;
    transition-delay: 1s;
    will-change: clip;
}

/* Current Slide 
-------------------------------------*/
li.current {
    visibility: visible;
    transition-delay: 0s;
}

li.current .image {
    clip: rect(0, 80rem, 50rem, 0);
}

/* Prev Slide 
------------------------------------*/
li.prev_slide .image {
    clip: rect(0, 0, 50rem, 0);
}

/* Text H2 
-------------------------------------*/
.content {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    padding: 5rem 0 0 3rem;
    font-size: 3rem;
    text-align: left;
    color: black;
    font-family: circular-medium;
}

.content-list1 {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    padding: 8rem 0 0 15rem;
    font-size: 1.5rem;
    text-align: left;
    color: black;
    font-family: circular-book;
}

.content-list2 {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    padding: 8rem 0 0 35rem;
    font-size: 1.5rem;
    text-align: lright;
    color: black;
    font-family: circular-book;
}

.content-list1 h5 {
    text-overflow: ellipsis;
    overflow: hidden;
    transform: translateY(-30%);
    opacity: 0;
    transition: transform 1s, opacity 1s;
    will-change: transform, opacity;
}

.content-list2 h5 {
    text-overflow: ellipsis;
    overflow: hidden;
    transform: translateY(-30%);
    opacity: 0;
    transition: transform 1s, opacity .7s;
    will-change: transform, opacity;
}

.content h2 {
    text-overflow: ellipsis;
    overflow: hidden;
    transform: translateY(-30%);
    opacity: 0;
    transition: transform 1s, opacity 1s;
    will-change: transform, opacity;
}

.content a {
    display: inline-block;
    font-size: 4rem;
    text-transform: lowercase;
    padding: 1.5rem;
    opacity: 0;
    transform: translateY(-100%);
    transition: transform .5s .1s, opacity .5s .1s;
    will-change: transform, opacity;
}

li.current .content h2 {
    transform: translateY(0);
    opacity: 1;
    transition-delay: 1s;
}

li.current .content-list1 h5 {
    transform: translateY(0);
    opacity: 1;
    transition-delay: 1.5s;
}

li.current .content-list2 h5 {
    transform: translateY(0);
    opacity: 1;
    transition-delay: 1.7s;
}