.timeline {
    /* background-color: aqua; */
    background: linear-gradient(rgba(16, 29, 44, 0.894), rgba(16, 29, 44, 0.815)), url("../Img1/mystory.jpg") center center fixed;
    margin: auto;
    max-width: 100vw;
    /* height: 100vh; */
    padding-top: 27rem;
    padding-bottom: 30rem;
    margin-top: -21rem;
    /* padding: 25px; */
    display: grid;
    grid-template-columns: 1fr 3px 1fr;
    font-family: "Fira Sans", sans-serif;
    color: #ffffff;
    -webkit-clip-path: polygon(50% 20%, 100% 0, 100% 60%, 100% 100%, 0 100%, 0% 60%, 0 0);
    clip-path: polygon(50% 20%, 100% 0, 100% 60%, 100% 100%, 0 100%, 0% 60%, 0 0);
    position: relative;
}

.quote {
    color: #f4a460;
    font-style: italic;

    position: absolute;
    top: 22rem;
    font-size: 2rem;
    left: 50%;
    transform: translateX(-50%);
}

.timeline__component {
    margin: 0 20px 20px 20px;
}

.timeline__component--bg {
    padding: 1.5em;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

/* LEAVE TILL LAST */
.timeline__component--bottom {
    margin-bottom: 0;
}

.timeline__middle {
    position: relative;
    background: #ffffff;
}

.timeline__point {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 15px;
    height: 15px;
    background: #ffffff;
    border-radius: 50%;
}

/* LEAVE TILL LAST */
.timeline__point--bottom {
    top: initial;
    bottom: 0;
}

.timeline__date--right {
    text-align: right;
}

.timeline__title {
    margin: 0;
    font-size: 1.15em;
    font-weight: bold;
}

.timeline__paragraph {
    line-height: 1.5;
}

@media (max-width:800px) {
    .timeline {
        margin-top: -17rem;


    }
}

@media(max-width:600px) {
    .timeline__component {
        font-size: .7rem;
    }
}

@media(max-width:400px) {
    .timeline__component {
        font-size: .6rem;
    }
}

@media (max-width:1200px) {
    .timeline {
        margin-top: -26rem;
        padding-top: 30rem;

    }

    .grid--2-cols {

        padding-bottom: 18rem;
    }

    .quote {

        top: 21rem;
        max-width: 50vw;

    }
}

@media (max-width:750px) {
    .timeline {
        margin-top: -26rem;
        padding-top: 36rem;

    }

    .grid--2-cols {

        padding-bottom: 18rem;
    }

    .quote {
        font-size: 1.5rem;

        top: 26rem;
        max-width: 50vw;

    }
}

@media (max-width:600px) {

    .quote {
        font-size: 1.5rem;
        top: 28rem;



    }
}

@media (max-width:400px) {

    .quote {
        font-size: 1.5rem;
        top: 26rem;



    }
}