@media (max-width: 768px) {

    html, body {
        overflow-x: hidden;
    }

    header {
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    main {
        margin-top: -4rem;
    }

    .mid {
        height: 6rem;
    }

    .jobdesc {
        margin-left: 0;
    }

    #about {
        display: block;
        margin: 11rem auto 6.25rem;
    }

    .content p {
        margin: 0 0.6rem;
        text-align: justify;
        max-width: 90%;
    }

    .content {
        align-items: center;
    }

    .organization {
        margin-top: 2rem;
    }

    .organization img {
        width: 100%;
        max-width: 18.75rem;
        margin-left: 2rem;
    }

    .organization p {
        max-width: 70%;
        text-align: justify;
    }

    .imagecontainer img{
       align-items: center;
        margin-right: 1rem;
        margin-top: 2rem;
    }

    .preview {
        margin-top: 0rem;
    }

    .preview .picture img, .preview .image img, .preview .image1 img {
        width: 7rem;
    }

    .preview .image2 img, .preview .image3 img {
        width: 22rem;
    }

    .timeline-container {
        padding: 0.8rem;
        width: 100%;
        overflow-x: auto;
        position: relative;
    }

    .timeline-container table {
        margin: 0 1rem;
    }

    .timeline-container th, .timeline-container td {
        padding: 0.5rem;
    }

    /*.scroll-indicator {*/
    /*    position: absolute;*/
    /*    top: 50%;*/
    /*    right: 1rem;*/
    /*    transform: translateY(-50%);*/
    /*    font-size: 1.5rem;*/
    /*    color: #2c2c2c;*/
    /*    display: block;*/
    /*}*/

    #jadwal img {
        width: 23rem;
    }

    .preview p {
        max-width: 90%;
        text-align: justify;
    }

    .album-header img {
        width: 90%;
    }
}