
.step {
    margin-top: 45px;
}

#conclusion {
    margin-bottom: 60px; 
}
#conclusion .btn {
    margin-top: 20px;
}

#scully-gif {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
#scully-gif img {
    width: 540px;
    aspect-ratio: 54 / 45;
    margin-top: -400px;
}
#scully-gif figcaption {
    width: 540px;
    text-align: left;
}
#scully-gif figcaption::first-line {
    margin-left: -15px;
}

#photo-preview {
    text-align: right;
    margin-top: 60px;
}

@media (max-width: 1100px) {
    #scully-gif { 
        margin-right: 30px;
    }
    #scully-gif img,
    #scully-gif figcaption {
        width: 460px;
    }
}
@media (max-width: 960px) {
    #scully-gif img {
        margin-top: -260px;
    }
    #scully-gif img,
    #scully-gif figcaption {
        width: 360px;
    }
}
@media (max-width: 768px) {
    .row {
        flex-direction: column;
        gap: 15px;
    }
    #photo-preview {
        text-align: left;
        margin-top: 0;
    }
    .row .row-primary {
        max-width: unset;
    }
    #poster-preview {
        margin: 45px 0 0;
        max-width: unset;
    }
    #timeline-row {
        flex-direction: column-reverse;
    }
    #timeline-row::after {
        content: "* * *";
        color: var(--eggshell-dark-muddy);
        margin-top: 12px;
    }
    .row#legend-row .row-secondary,
    .row#mobile-row .row-secondary {
        max-width: unset;
    }
    .row#mobile-row .row-secondary {
        margin-bottom: 0;
    }
    #scully-gif img {
        margin-top: -200px;
    }
    #scully-gif img,
    #scully-gif figcaption {
        width: 300px;
    }
}
@media (max-width: 620px) {
    #scully-gif { 
        display: block;
        margin: 0;
    }
    #scully-gif img {
        margin-top: 0;
    }
    #scully-gif img,
    #scully-gif figcaption {
        width: 100%;
        max-width: unset;
    }
}