.events-services-grid.is-mobile { display: none; }
.events-services-grid.is-desktop { display: grid; }
.events-services-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(3, 215px);
padding: 0 60px;
}
.events-services-grid.is-desktop{
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(3, 215px);
}
.events-services-grid.is-mobile {
grid-template-columns: repeat(2, 50%);
grid-template-rows: repeat(7, 140px);
padding: 0 20px;
}
.events-service-item {
background: #fff;
border-radius: 40px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 15px;
aspect-ratio: 1/1;
transform: rotate(45deg);
transform-origin: center;
}
.events-service-item:hover:not(.empty) {
box-shadow: 0 3px 86px #00000029;
}
.events-service-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
transform: rotate(-45deg);
}
.events-service-title {
font-family: "Raleway", sans-serif;
font-weight: 500;
font-size: 20px;
line-height: 25px;
}
.events-service-item:hover:not(.empty) .events-service-title {
font-weight: 800;
}
.events-service-item.empty {
background: transparent;
border: none;
} .events-service-item.item-1 { border: 1px solid #E76035; }
.events-service-item.item-2 { border: 1px solid #964B98; }
.events-service-item.item-3 { border: 1px solid #69458C; }
.events-service-item.item-4 { border: 1px solid #7D4D92; }
.events-service-item.item-5 { border: 1px solid #BE327F; }
.events-service-item.item-6 { border: 1px solid #E78E2C; }
.events-service-item.item-7 { border: 1px solid #D93E62; }
@media (max-width: 1300px) {
.events-services-grid {
grid-template-rows: repeat(3, 185px);
}
}
@media (max-width: 1200px) {
.events-services-grid.is-desktop { display: none; }
.events-services-grid.is-mobile  { display: grid; }
.events-services-grid.is-mobile {
grid-template-rows: repeat(7, 220px);
padding: 0 80px;
}
.events-services-wrapper {
max-width: 768px;
margin: 0 auto;
}
}
@media (max-width: 768px) {
.events-service-title {
font-family: "Raleway", sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 18px;
}
.events-service-icon {
max-width: 45px;
}
}
@media (max-width: 576px) {
.events-services-grid.is-mobile {
grid-template-rows: repeat(7, 170px);
padding: 0 40px;
}
}
@media (max-width: 475px) {
.events-services-grid.is-mobile {
grid-template-rows: repeat(7, 140px);
padding: 0 20px;
}
}
@media (max-width: 375px) {
.events-services-grid.is-mobile {
grid-template-rows: repeat(7, 110px);
}
}