/* **** Title Section **** */
.category-template-container > .title-section {
    padding-top: 32px;
    padding-bottom: 16px;
    border-bottom: 1px solid #dddddd;
}

.category-template-container > .title-section >    .sponsored-by-div {
    align-items: center;
    gap: 8px;
    flex-direction: row;
    display: flex;
}

/* Media Queries */
@media (min-width: 1024px){
    .category-template-container > .title-section {
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        column-gap: 32px;
        align-items: center;
        padding-bottom: 32px;
    }

    .category-template-container > .title-section > .sponsored-by-div {
        order: 3;
        flex: 1;
    }

    .category-template-container > .title-section :nth-child(2) {
        order: 1;
        flex: 1;
    }

    .category-template-container > .title-section :nth-child(3) {
        order: 2;
        flex: 2;
    }

    .category-template-container > .title-section > sponsored-by-div :nth-child(1) {
        order: 1;
    }
}

/* **** Feautured Section **** */
.category-template-container .featured-section {
    padding-bottom: 16px;
    padding-top: 16px;
    border-bottom: 1px solid #dddddd;
}

/* col-1 */
.category-template-container > .featured-section > .col-1 {
    padding-bottom: 16px;
    border-bottom: 1px solid #dddddd;
}

/* col-2 */
.category-template-container > .featured-section > .col-2 {
    padding-top: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #dddddd;
}

.category-template-container > .featured-section > .col-2 > .card-div {
    padding-bottom: 16px;
    padding-top: 16px;
    border-bottom: 1px solid #dddddd;
}

/* col-3 */
.category-template-container .featured-section > div.col-3 {
    padding-top: 16px;
    grid-area: most popular;
    flex-wrap: nowrap;
}

.category-template-container .featured-section > div.col-3 > .card-div .title-div {
    height: 100%;
    display: block;
    overflow: hidden;
}

.category-template-container .featured-section > div.col-3 > .card-div .title-div .title-heading {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 4.5em;
    word-break: break-word;
}

/* Media Queries */
@media (min-width: 1024px) {
    .category-template-container .featured-section {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
        width: 100%;
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .category-template-container > .featured-section :nth-child(1) {
        order: 2;
    }

    .category-template-container > .featured-section :nth-child(2) {
        order: 1;
    }

    .category-template-container > .featured-section :nth-child(3) {
        order: 3;
    }

    .category-template-container > .featured-section > .col-1 {
        padding: 0px 16px;
        border-right: 1px solid #dddddd;
        border-bottom: none;
    }

    .category-template-container > .featured-section > .col-2 {
        padding: 0 16px 0 0;
        border-right: 1px solid #dddddd;
        border-bottom: none;
    }

    .category-template-container .featured-section > div.col-3 {
        padding: 0 0 0 16px;
    }
}

/* **** 4Col with Ad Section **** */
/* **** Other Category Section **** */
.category-template-container .other-category-section {
    display: grid;
    padding-top: 16px;
    padding-bottom: 16px;
    grid-template-columns: 1fr;
    border-bottom: 1px solid #dddddd;
}

@media (min-width: 1024px) {
    .category-template-container .other-category-section {
        grid-template-columns: 1fr 2fr 1fr;
        padding-top: 32px;
        padding-bottom: 32px;
    }
}

.category-template-container .other-category-section .col-1 {
    border-bottom-color: #dddddd;
}

@media (min-width: 1024px) {
    .category-template-container .other-category-section .col-1 {
        padding-right: 16px;
        border-right: 1px solid #dddddd;
    }
}

.category-template-container .other-category-section .col-2 {
    padding-top: 16px;
    padding-bottom: 16px;
    border-bottom-width: 1px;
    border-bottom-color: #dddddd;
}

@media (min-width: 1024px) {
    .category-template-container .other-category-section .col-2 {
        border-right: 1px solid #dddddd;
        padding: 0px 16px;
    }
}

.category-template-container .other-category-section .col-3 {
    padding-top: 16px;
    padding-bottom: 16px;
    border-bottom-width: 1px;
    border-bottom-color: #dddddd;
}

@media (min-width: 1024px) {
    .category-template-container .other-category-section .col-3 {
        padding-left: 16px;
        padding-top: 0px;
        padding-bottom: 0px;
    }
}

/* **** More From Category Section **** */
.category-template-container .more-from-category-section {
    padding-top: 16px;
    padding-bottom: 16px;
    border-bottom-width: 1px;
    border-bottom-color: #dddddd;
}

@media (min-width: 1024px) {
    .category-template-container .more-from-category-section {
        margin-top: 32px;
        padding-bottom: 32px;
    }
}

@media (min-width: 1024px) {
    .category-template-container .more-from-category-section .col-1,
    .category-template-container .more-from-category-section .col-2 {
        display: grid;
        grid-template-columns: 3fr 1fr;
        border-bottom: 1px solid #dddddd;
        padding-top: 16px;
        padding-bottom: 16px;
    }
}

@media (min-width: 1024px) {
    .category-template-container .more-from-category-section .col-2 .ad {
        grid-column: 2;

        /* Place in first column */
        grid-row: 1;
    }

    .category-template-container .more-from-category-section .col-2 .loop {
        grid-column: 1;

        /* Place in first column */
        grid-row: 1;
    }
}

@media (min-width:1024px) {
    .category-template-container .more-from-category-section .ad {
        padding-left: 16px;
    }
}