h2{
    font-family: boldText;
    font-size: clamp(1.7rem, 2.5vw, 2.3rem);
    letter-spacing: .15rem;
    padding-bottom: 1rem;
}

.portHighlights{
    padding-top: 5rem;
}

.highlightText{
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 3rem 0;
}


.highlightText p{
    font-family: regularText;
    font-size: clamp(1.2rem, 1.7vw, 1.5rem);
    max-width: 35ch;
    font-weight: 100;
    letter-spacing: .12rem;
    padding-left: 1.5rem;
    color: #3a3a3a;
}

img{
    max-width: 100%;
}
figure{
    margin: 0;
    padding: 0;
}

.gallery{
    padding: 3rem 0;
}

.gridWrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    min-height: 300px;
    background-color: #1c472886;
    padding: 1rem;
}

.gridWrapper figure:nth-of-type(1) {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}

.gridWrapper figure:nth-of-type(2) {
    grid-column: 2;
    grid-row: 1;
}

.gridWrapper figure:nth-of-type(3) {
    grid-column: 3;
    grid-row: 1;
}
.gridWrapper figure:nth-of-type(4) {
    grid-column: 4;
    grid-row: 1;
}

.gridWrapper figure:nth-of-type(5) {
    grid-column: 2/ span 3;
    grid-row: 2 / 3;
}

@media only screen and (max-width:767px) {
    
    figure{
        max-width: 250px;
    }

    .gridWrapper {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
    .gridWrapper figure:nth-of-type(1) {
        grid-column: 1 / span 2;
        grid-row: 1 / 3;
    }
    
    .gridWrapper figure:nth-of-type(2) {
        grid-column: 3;
        grid-row: 1;
    }
    
    .gridWrapper figure:nth-of-type(3) {
        grid-column: 3;
        grid-row: 2;
    }
    .gridWrapper figure:nth-of-type(4) {
        grid-column: 3;
        grid-row: 3;
    }
    
    .gridWrapper figure:nth-of-type(5) {
        grid-column: 1 / span 2;
        grid-row: 3;
    }
}

@media only screen and (max-width:649px) {
    .highlightText{
        align-items: flex-start;
    }

    .highlightText p{
        padding-left: 0;
    }
    figure{
        max-width: 100%;
    }
    .gridWrapper {
        grid-template-columns: 1fr;
    }
    .gridWrapper figure:nth-of-type(1) {
        grid-column: 1;
        grid-row: 1 / 2;
    }
    
    .gridWrapper figure:nth-of-type(2) {
        grid-column: 1;
        grid-row: 2;
    }
    
    .gridWrapper figure:nth-of-type(3) {
        grid-column: 1;
        grid-row: 3;
    }
    .gridWrapper figure:nth-of-type(4) {
        grid-column: 1;
        grid-row: 4;
    }
    
    .gridWrapper figure:nth-of-type(5) {
        grid-column: 1;
        grid-row: 5;
    }
}