:root {
    --PanelImage: url(../Images/Panels/Services/Panel_2.jpg);
}

.panel{
    position: relative;
    background-image: var(--PanelImage);
    background-position: center;
    background-size: cover;  
}

.panel:hover{
    cursor: pointer;
}

.panel:hover > .panel-filter{
    opacity: 1;
    transition: opacity 1s ease;
}


.panel-filter{
    position: absolute;
    opacity: 0.5;
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
}

.panel-information{
    position: relative;
    text-align: center;
    z-index: 1;
    gap: 70px;
    padding-bottom: 15px;
}

.panel-title{
    width: 90%;
}

.panel-more{
    margin-bottom: 20px;
}

.panel-services{
    width: 300px;
    height: 500px;
}

.panel-services > .panel-information:hover{
    transition: gap 1s ease;
    gap: 200px;
}

.panel-explore{
    width: 300px;
    height: 400px;
}

.panel-explore > .panel-information:hover{
    transition: gap 1s ease;
    gap: 160px;
}

@media screen and (max-width: 1280px) {
    .panel-services{
        width: 250px;
        height: 400px;
    }

    .panel-explore{
        width: 250px;
        height: 350px;
    }

    .panel-information{
        gap: 60px;
    }

    .panel-services > .panel-information:hover{
        gap: 150px;
    }
    
    .panel-explore > .panel-information:hover{
        gap: 130px;
    }


}

@media screen and (max-width: 768px) {    
    .panel-services{
        width: 400px;
        height: 250px;
    }

    .panel-explore{
        width: 400px;
        height: 250px;
    }

    .panel-information{
        gap: 30px;
    }

    .panel-services > .panel-information:hover{
        gap: 90px;
    }
    
    .panel-explore > .panel-information:hover{
        gap: 90px;
    }
}

@media screen and (max-width: 510px) {    
    .panel-services{
        width: 300px;
        height: 250px;
    }

    .panel-explore{
        width: 300px;
        height: 200px;
    }

    .panel-explore > .panel-information:hover{
        gap: 70px;
    }
}