@import "mixins";

.ftm_category_hub_content_wrapper {
    .category-description {
        margin: 15px 0px;
    }

    .content_panel {
        > h1 {
            width: auto;
        }
    }
}

.ftm_category_hub_content_wrapper{
    .ftm_category_hub_content_wrapper{
        .latest {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: flex-start;
        justify-content: center;
        align-items: flex-start;
        column-gap: 13px;

        &.narrow {
            article {
            width: 32%;
            .post-thumbnail {
                img {
                aspect-ratio: unset;
                min-height: 150px;
                }
            }
            }
        }

        > h2 {
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            background: unset;
        }

        > div.related--posts-title {
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            background: unset;
            font-weight: bold;
            font-size: var(--ftm_h2_font_size_setting);
            margin-bottom: 20px;
        }

        > article {
            width: 100%;
            max-width: none;
            margin-bottom: 20px;

            > .post-thumbnail {
            display: block;
            width: 100%;
            position: relative;

            > a {
                color: #fff;
                text-decoration: none;

                > img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                max-height: 234px;
                aspect-ratio: 1 / 1;
                }
            }
            }

            > h4 {
            font-size: 1.25rem;
            color: #27292e;
            margin: unset;

            > a {
                color: inherit;
                text-decoration: none;
                font-size: 1.25rem;
                transition: color 0.3s ease-in-out, opacity 0.3s ease-in-out,
                background-color 0.3s ease-in-out;

                &:hover {
                color: #ff7917;
                }
            }
            }

            .post_excerpt {
            color: #27292e;
            }

            .post_meta {
            letter-spacing: 0px;
            margin-top: auto;
            font-size: 0.8rem;
            font-family: helvetica;
            color: #fff;
            background: linear-gradient(
                to bottom,
                rgba(0, 0, 0, 0) 0%,
                rgba(0, 0, 0, 0.33) 18%,
                rgba(0, 0, 0, 0.73) 56%,
                rgba(0, 0, 0, 1) 90%,
                rgba(0, 0, 0, 1) 100%
            );
            display: flex;
            flex-direction: row;
            align-content: center;
            justify-content: flex-start;
            align-items: flex-end;
            min-height: 58px;
            padding: 8px 10px;
            position: absolute;
            width: 100%;
            bottom: 9px;

            > span {
                color: #fff;
            }
            }
        }

        #no-more-posts {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            align-content: center;
            justify-content: center;
            align-items: center;
            width: 100%;
            min-height: 40px;
            margin-bottom: 25px;
            color: #6c6c6c;
            font-family: helvetica;
            font-size: 0.8em;
        }
        }
    }
}

@keyframes ftm-lm {
  0% {
    top: 8px;
    height: 64px;
  }
  50%,
  100% {
    top: 24px;
    height: 32px;
  }
}

@include xxs {
    .ftm_category_hub_content_wrapper{
        .latest {
            > article {
            max-width: 31%;
            }
        }
    }
}

@include xs {
    .ftm_category_hub_content_wrapper{
        .latest {
            > article {
            max-width: 32%;
            }
        }
    }
}

@include lg {
    .ftm_category_hub_content_wrapper{
        .latest {
            > article {
            max-width: 32.5%;
            }
        }
    }
}
