/* CSS Document */

.captain {
    display: grid;
    grid-template-columns: '1fr';
    grid-template-areas: "captain-photo" "captain-details";
}

.captain-photo {
    grid-area: captain-photo;
}

.captain-details {
    grid-area: captain-details;
}

@media only screen and (min-width: 960px) {

    .captain {
        grid-template-columns: '1fr 2fr';
        grid-template-areas: "captain-photo captain-details";
        grid-gap: 30px;
    }
}