.workshop-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 50px 30px;
    background: #F7F8FB;
    padding: 50px !important;
    border-radius: 20px !important;
    margin-bottom: 90px !important;
}

.workshop-card {
    border-radius: 14px;
    width: 100%;
    max-width: 320px;
    margin: 0 auto !important;
    background-color: #FFF;
    box-shadow: 0px 0px 0.968px 0px rgba(12, 26, 75, 0.24), 0px 2.903px 7.742px -0.968px rgba(50, 50, 71, 0.05);
}

.workshop-card .workshop-image-container {
    height: 194px;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 14px;
}

.workshop-card .workshop-image-container .colored-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.0) 60%);
    pointer-events: none; 
border-radius: 14px;
}

.workshop-card .workshop-image-container .workshop-date {
    color: #FFF;
    text-align: right;
    font-family: Roboto;
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: 23.226px;
    position: relative;
    z-index: 2;
    top: 22px;
right: 22px;
}

.workshop-card .workshop-image-container .workshop-time {
    color: #FFF;
    text-align: right;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 136.523%;
    position: relative;
    z-index: 2;
    top: 22px;
right: 22px;
margin-top: 4px !important;
}





.workshop-card .workshop-details-container {
    display: flex;
    flex-direction: column;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
padding-left: 15px !important;
padding-right: 15px !important;
}

.workshop-card .workshop-details-container .workshop-title {
color: var(--Text-Body-Light, #425466);
font-family: Roboto;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 23.226px;
margin-top: 24px !important;
margin-bottom: 8px !important;

}



.workshop-card .workshop-details-container .workshop-address {
color: #7C8893;

font-family: Lora;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 136.523%;
margin-bottom: 16px !important;

}

.workshop-card .workshop-details-container .workshop-reservation-link {
border-radius: 8px;
border: 1px solid #7DB6C6;
color: #7DB6C6;
background: #FFF;
display: flex;
padding: 8px 16px !important;
align-items: flex-start;
gap: 10px;
max-width: 85px;
margin-top: auto !important;
margin-bottom: 22px !important;
justify-content: center;
}

@media screen and (max-width: 950px) {
    .workshop-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px 30px;
    background: #F7F8FB;
    padding: 40px 20px !important;
    }
.workshop-card {
    max-width: 450px;
}

}



@media screen and (max-width: 650px) {
    .workshop-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px 20px;
    background: #F7F8FB;
    padding: 40px 20px !important;
}
}