/*LIBRE BASKERVILLE FONT*/
@font-face {
    font-family: baskervilleBold;
    src: url(../fonts/LibreBaskerville/LibreBaskerville-Bold.ttf);
}

/*JOST FONT*/
@font-face {
    font-family: jostRegular;
    src: url(../fonts/Jost/Jost-Regular.ttf);
}

/*STYLES*/

.modal-panel{
    height: clamp(300px, 60vh, 600px);
}

.modal-title{
    font-family: baskervilleBold;
    font-size: clamp(20px, 5vw, 35px);
    color: #fff;
    text-align: center;
}

.modal-content{
    border-radius: 0 8px 8px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

.modal-text,
.modal-list{
    font-family: jostRegular;
    font-size: clamp(14px, 2vw, 16px);
}

.modal-list{
    list-style: none;
}

.brands-container{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    place-items: center;
    gap: clamp(10px, 2vw, 20px);
}

.brand{
    width: clamp(130px, 20vw, 160px);
}

.modal-text-a:hover{
    color: #1f1d54;
    text-decoration-color: #1f1d54;
}

.modal-sell-header{
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px 0 0 10px;
    background-image: linear-gradient(
        -47deg,
        rgba(31, 29, 84, 0.8),
        rgba(30, 58, 138, 0.8)
      ),
      url(../images/venta_equipos_repuestos.webp);
      background-size: cover;
}

.modal-maintenance-header{
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px 0 0 8px;
    background-image: linear-gradient(
        -47deg,
        rgba(31, 29, 84, 0.8),
        rgba(30, 58, 138, 0.8)
      ),
      url(../images/mantenimiento_preventivo.webp);
      background-size: cover;
}

.modal-adjustment-header{
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px 0 0 10px;
    background-image: linear-gradient(
        -47deg,
        rgba(31, 29, 84, 0.8),
        rgba(30, 58, 138, 0.8)
      ),
      url(../images/pesas_patron.webp);
      background-size: cover;
}

@media (max-width: 768px){
    .modal-maintenance-header,
    .modal-sell-header,
    .modal-adjustment-header{
        border-radius: 8px 8px 0 0;
    }

    .modal-content{
        border-radius: 0 0 8px 8px;
    }
}