.pm-tiles{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.pm-tiles .tile{
    margin-top: 20px;
    border-radius: 20px;
}

/*variables for width*/
.pm-tiles{
    --col-2: calc( (100% - 20px) / 2);
    --col-3: calc( (100% - 40px) / 3);
    --col-4: calc( (100% - 60px) / 4);
    --col-5: calc( (100% - 80px) / 5);
    --col-6: calc( (100% - 100px) / 6);
}

/*col 3*/

    @media (min-width: 1024px) {
        .pm-tiles .col-2{
            width: var(--col-2);
        }
    }
    @media (max-width: 1023px) {
        .pm-tiles .col-2{
            width: 100%;
            height: auto !important;
        }
    }


/*col 3*/
    @media (min-width: 1024px) {
        .pm-tiles .col-3{
            width: var(--col-3);
        }
    }
    @media (min-width: 768px) and (max-width: 1023px)  {
        .pm-tiles .col-3{
            width: 100%;
        }
        .pm-tiles.multi-rows .col-3{
            width: var(--col-2);
        }
    }
    @media (min-width: 320px) and (max-width: 767px)  {
        .pm-tiles .col-3{
            width: 100%;
            height: auto !important;
        }
    }


/*col 4*/
    @media (min-width: 1024px) {
        .pm-tiles .col-4{
            width: var(--col-4);
        }
    }
    @media (min-width: 475px) and (max-width: 1023px)  {
        .pm-tiles .col-4{
            width: var(--col-2);
        }
    }
    @media (min-width: 320px) and (max-width: 474px)  {
        .pm-tiles .col-4{
            width: 100%;
            height: auto !important;
        }
    }

/*col 6*/
    @media (min-width: 1300px) {
        .pm-tiles .col-6{
            width: var(--col-6);
        }
    }
    @media (min-width: 1024px) and (max-width: 1299px)  {
        .pm-tiles .col-6{
            width: var(--col-3);
        }

        .pm-tiles.multi-rows .col-6{
            width: var(--col-4);
        }
    }
    @media (min-width: 768px) and (max-width: 1023px)  {
        .pm-tiles .col-6{
            width: var(--col-3);
        }
    }
    @media (min-width: 475px) and (max-width: 767px)  {
        .pm-tiles .col-6{
            width: var(--col-2);
        }
    }
    @media (min-width: 320px) and (max-width: 474px)  {
        .pm-tiles .col-6{
            width: 100%;
            height: auto !important;
        }
    }