.likesphoto{
    display: block;
    margin: 2rem auto;
    width: 10vw;
    height: auto;
    object-fit: contain;
}

.likesphotosection{
    display:flex; 
    flex-direction: row;
    gap: 5vw;
    width: 60vw;
    justify-self: center;
    align-items: center;
}

.selfphoto{
    outline: 3px solid var(--dark-blue); 
    outline-offset: 5px; 
}

.likesphoto{
    outline: 3px solid var(--dark-blue); 
    outline-offset: 5px; 
}

/* Phone */
@media screen and (max-width: 619px) {
    .aboutsection{
        width: 70%; 
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center; 
    }

    .selfphoto{
        width: 100%;
        height: 13rem;
        object-fit: contain;
        display: block;
        float: left;
        margin-right: 2rem;
        object-fit: cover;
        object-position: top;
    }

    .likesphoto{
        margin-block: 2rem auto;
        width: auto;
        height: 25vw;
    }

    .likesphotosection{
        flex-wrap: wrap;
        flex-direction: wrap;
        justify-content: center;
    }
}

/* Tablet */
@media screen and (min-width: 620px) and (max-width: 1099.9px) {
    .aboutsection{
        width: 100%; 
        height: auto;
        display: flex;
        justify-content: center; 
        align-items: stretch;   
    }

    .selfphoto{
        height: auto;
        width: 20%;
        object-fit: cover;
        display: block;
        margin-right: 2rem;
    }

    .abouttext{
        font-size: 1.25rem;
        width: 60%;
    }
}


/* Desktop */
@media screen and (min-width: 1100px) {
    .aboutsection{
        width: 100%; 
        height: 15rem;
        display: flex;
        justify-content: center; 
        align-items: center;   
    }

    .selfphoto{
        height: 100%;
        object-fit: contain;
        display: block;
        float: left;
        margin-right: 2rem;
    }

    .abouttext{
        font-size: 1.25rem;
        width: 50%;
    }
}