.mediaCenter {
    padding: 7.5% 10% 7.5% 10%;
}

.filter {
    text-align: left;
    margin: 2em auto;
    gap: 10px;
    display: flex;
}

.filter a {
    text-align: center;
    padding: 0.7em 1em;
    background: var(--main3);
    color: var(--main);
    text-decoration: none;
    border-radius: 25px;
    border: 1px solid var(--main);
    font-family: Plus Jakarta Sans;
}

.filter a.current {
    color: var(--main3);
    background: var(--main);
}

.boxGroup {
    text-align: left;
    display: grid;
    grid-gap:50px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}


.boxGroup div {
    /*    width:250px;
    height:250px;
    display: inline-block;*/
}

.events {
}

.two {
    background-color: cornflowerblue;
}

.three {
    background-color: #3e7dee;
}

.singleMediaCenter {
    display: flex;
    flex-wrap: wrap;
    row-gap: 10px;
}

.singleMediaCenter p {
    color: var(--main);
    font-size: 14px;
    font-family: Plus Jakarta Sans;
    font-weight: 400;
}
.singleMediaCenter img {
    border-radius: 25px;
}

.calendarDateMediaCenter,
.readmoreMediaCenter {
    display: flex;
    width: 100%;
    align-items: center;
}

.calendarDateMediaCenter svg,
.readmoreMediaCenter svg {
    width: auto;
    padding-right: 5px;
}

.calendarDateMediaCenter p {
    width: 75%;
}

.readmoreMediaCenter p {
    text-decoration: underline;
    padding-right: 5px;
}

.mediaCenter.arabic {
    direction: rtl;
}

.mediaCenter.arabic .filter {
    text-align: unset;
    direction: rtl;
}

.mediaCenter.arabic .filter .all.current {
    order: 1;
}

@media (max-width: 1024px) {
    .mediaCenter .filter {
        gap: 10px;
        display: flex;
        flex-wrap: wrap;
    }
}

@media (max-width: 737px) {
    .mediaCenter .boxGroup {
        grid-template-columns: 1fr;
    }
}