/* dddd */
.photographers-preview{
    /* border: 2px solid red; */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex-direction: column;
}
.photographers-preview-inner{
    /* border: 2px solid blue; */
    box-sizing: border-box;
    width: 75%;
    margin: auto;
    display: flex;
    flex-direction: column;
}
.preview-first{
    /* border: 2px solid teal; */
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 2fr 1.2fr 1.1fr;
}
.preview-second{
    /* border: 2px solid teal; */
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 2fr 2.1fr 1.4fr 1.3fr 1.6fr;
}
.preview-wrap{
    /* border: 2px solid indigo; */
    height: 14vw;
    /* width: 14vw; */
    margin: 0.5vw;
    box-sizing: border-box;
}
.preview-first .preview-wrap img:hover, video:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 15px rgba(0,0,0,0.3);
}
.preview-second .preview-wrap img:hover, video:hover { 
    transform: scale(1.05);
    box-shadow: 0 8px 15px rgba(0,0,0,0.3);
}
.preview-wrap img, video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.2s ease-in-out;
}
.preview-btn-wrap{
    /* border: 2px solid palevioletred; */
    width: 75%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.preview-btn{
    font-size: 1.2vw;
    border-radius: 6rem;
    color: #ffffff;
    background: #397085b5;
    margin: 2vh;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 1vw 5vw;
    transition: color 0.3s ease, background 0.3s ease;
}
.preview-btn:hover{
    color: #212121;
    text-decoration: none;
    background: #3970854d;
}
@media screen and (max-width: 860px){

    .photographers-preview-inner{
        width: 90%;
        flex-direction: row;
        justify-content: center;
    }
    .preview-first,
    .preview-second{
        /* grid-template-columns: none; */
        /* grid-template-rows: repeat(5, 1fr); */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .preview-wrap{
        width: 40vw;
        height: auto;
        /* min-height: 40vw; */
        margin: 2vw;
        flex: 1 0 40vw;
    }
    .preview-btn-wrap{
        width: 90%;
    }
    .preview-btn{
        text-align: center;
        font-size: 3.5vw;
        padding: 2vw 6vw;
        border-radius: 8vw;
    }
}