.intro {
    display: grid;
    grid-template-columns: 3fr 1fr 3fr;
    grid-template-rows: 2fr 1fr 2fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    position: relative;
}

.intro>div:first-of-type {
    grid-area: 1 / 1 / 2 / 3;
}

.intro>img:first-of-type {
    grid-area: 1 / 3 / 3 / 4;
    width: 100%;
}

.intro>img:nth-of-type(2) {
    grid-area: 2 / 1 / 4 / 2;
    width: 100%;
}

.intro>div:nth-of-type(2) {
    grid-area: 3 / 2 / 4 / 4;
}

.timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 3fr repeat(2, 2.2fr) 3fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    text-align: center;
    background-image: url(/imgavif/timeline.svg);
    background-position: center;
    background-repeat: no-repeat;
}

.timeline>img {
    width: 100%;
    align-self: center;
}

.timeline>img:nth-of-type(1) {
    grid-area: 1 / 1 / 3 / 2;
}

.timeline>img:nth-of-type(2) {
    grid-area: 3 / 2 / 5 / 3;
}

.timeline>img:nth-of-type(3) {
    grid-area: 1 / 3 / 3 / 4;
}

.timeline>img:nth-of-type(4) {
    grid-area: 3 / 4 / 5 / 5;
}

.timeline>div:nth-of-type(1) {
    grid-area: 1 / 2 / 2 / 3;
}

.timeline>div:nth-of-type(2) {
    grid-area: 4 / 1 / 5 / 2;
}

.timeline>div:nth-of-type(3) {
    grid-area: 4 / 3 / 5 / 4;
}

.timeline>div:nth-of-type(4) {
    grid-area: 1 / 4 / 3 / 4;
}

.tips {
    width: -webkit-fill-available;
    background-color: var(--burnt-orange);

    color: #FEFDFB;
    font-family: "Baloo Bhai 2";
    font-size: 48px;
    font-style: normal;
    font-weight: 500;
    line-height: 54px;
    padding: 40px 80px;
}

.tips span {
    color: #FEFDFB;
    font-family: "Baloo Bhai 2";
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: 50px;
    /* 104.167% */
}

.review {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.review p {
    color: #0D0D0D;
    text-align: center;
    font-family: "Roboto Slab";
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: 60px;
    max-width: 850px;
    /* 166.667% */
}

.review h4 {
    color: #006242;
    font-family: "Baloo Bhai 2";
    font-size: 21px;
    letter-spacing: 2.1px;
    margin: 0;
    margin-top: 10px;
}

.review span {
    color: #ED9B20;
    font-family: "Baloo Bhai 2";
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.gallery {
    display: flex;
    justify-content: space-between;
}

.gallery img {
    width: 25%;
}

.insta {
    color: var(--dark-teal);
    text-align: center;
    font-family: Kalam;
    font-size: 60px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    display: block;
}

.insta2 {
    color: var(--burnt-orange);
    text-align: center;
    font-family: 'Baloo Bhai 2';
    font-size: 48px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    display: block;
}

.img-s1 {
    position: absolute;
    top: -53px;
    left: 105%;
    width: 115px;
    z-index: -1;
    transform: rotate(120deg);
}

.img-s2 {
    bottom: 97%;
    left: 0;
    width: 100px;
    z-index: -1;
    position: absolute;
}

@media only screen and (max-width: 650px) {
    .intro {
        grid-template-rows: 2fr 0fr 2fr;
    }

    .tips {
        font-size: 20px;
        line-height: 25px;
        padding: 20px;
        margin: 0 15px;
    }

    .tips span {
        font-size: 35px;
        line-height: 40px;
    }

    .review svg {
        width: 50px;
    }

    .review p {
        line-height: normal;
    }

    .review h4 {
        font-size: 15px;
        margin-top: 0;
    }

    .insta {
        font-size: 35px;
    }

    .insta2 {
        font-size: 25px;
    }
}

@media only screen and (max-width: 1000px) {
    .timeline {
        grid-template-columns: repeat(3, 1fr);
        width: 100%;
        grid-template-rows: repeat(4, 1fr);
        background-image: url(/imgavif/timelineR.svg);
    }

    .timeline>div {
        max-width: 30vw;
        align-self: end;
    }

    .timeline>img {
        width: 100%;
        align-self: center;
    }

    .timeline>img:nth-of-type(1) {
        grid-area: 1 / 3 / 2 / 4;
    }

    .timeline>img:nth-of-type(2) {
        grid-area: 2 / 1 / 3 / 2;
    }

    .timeline>img:nth-of-type(3) {
        grid-area: 3 / 3 / 4 / 4;
    }

    .timeline>img:nth-of-type(4) {
        grid-area: 4 / 1 / 5 / 2;
    }

    .timeline>div:nth-of-type(1) {
        grid-area: 2 / 3 / 3 / 4;
    }

    .timeline>div:nth-of-type(2) {
        grid-area: 1 / 1 / 2 / 2;
    }

    .timeline>div:nth-of-type(3) {
        grid-area: 3 / 1 / 4 / 2;
    }

    .timeline>div:nth-of-type(4) {
        grid-area: 4 / 3 / 5 / 4;
    }
}