/* Photo collage on the About Me page. */

.about_gallery--wrapper .inner--container .grid {
    padding-top: 60px;
    padding-bottom: 200px;
    row-gap: 40px;
    align-items: start;
}

.about_gallery--wrapper .gallery_intro {
    grid-column: 2 / 11;
    margin-bottom: 40px;
}

.about_gallery--wrapper .photo {
    position: relative;
    width: 100%;
    display: block;
    border-radius: 10px;
    overflow: hidden;
}

.about_gallery--wrapper .photo img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    object-fit: cover;
    transform: translate(-50%, -50%) scale(1);
    transition: .6s all cubic-bezier(.455, .03, .515, .955);
    z-index: 1;
}

.about_gallery--wrapper .photo:hover img {
    transform: translate(-50%, -50%) scale(1.06);
}

/* Staggered collage: uneven columns, ratios and vertical offsets. */
.about_gallery--wrapper .photo:nth-of-type(1) {
    grid-column: 1 / 6;
    padding-top: 125%;
}

.about_gallery--wrapper .photo:nth-of-type(2) {
    grid-column: 7 / 11;
    padding-top: 133%;
    margin-top: 140px;
}

.about_gallery--wrapper .photo:nth-of-type(3) {
    grid-column: 2 / 6;
    padding-top: 100%;
    margin-top: 60px;
}

.about_gallery--wrapper .photo:nth-of-type(4) {
    grid-column: 7 / 13;
    padding-top: 66.66%;
    margin-top: -80px;
}

@media screen and (max-width: 1050px) {
    .about_gallery--wrapper .inner--container .grid {
        padding-bottom: 140px;
    }

    .about_gallery--wrapper .photo:nth-of-type(2) {
        margin-top: 90px;
    }

    .about_gallery--wrapper .photo:nth-of-type(4) {
        margin-top: -40px;
    }
}

@media screen and (max-width: 800px) {
    .about_gallery--wrapper .gallery_intro {
        grid-column: 2 / 13;
    }

    .about_gallery--wrapper .photo:nth-of-type(1) {
        grid-column: 1 / 7;
    }

    .about_gallery--wrapper .photo:nth-of-type(2) {
        grid-column: 7 / 13;
        margin-top: 60px;
    }

    .about_gallery--wrapper .photo:nth-of-type(3) {
        grid-column: 1 / 7;
        margin-top: 0;
    }

    .about_gallery--wrapper .photo:nth-of-type(4) {
        grid-column: 7 / 13;
        padding-top: 100%;
        margin-top: 0;
    }
}

@media screen and (max-width: 550px) {
    .about_gallery--wrapper .inner--container .grid {
        row-gap: 20px;
        padding-bottom: 100px;
    }

    .about_gallery--wrapper .gallery_intro {
        grid-column: 1 / 13;
    }

    .about_gallery--wrapper .photo:nth-of-type(1),
    .about_gallery--wrapper .photo:nth-of-type(2),
    .about_gallery--wrapper .photo:nth-of-type(3),
    .about_gallery--wrapper .photo:nth-of-type(4) {
        grid-column: 1 / 13;
        padding-top: 100%;
        margin-top: 0;
    }

    .about_gallery--wrapper .photo:nth-of-type(1) {
        padding-top: 125%;
    }
}