@import "src/scss/core/mixin";
.featured-museum-posts {
    margin-bottom: toRem(200);
    @include tablet {
        margin-bottom: toRem(93);
    }
    h2 {
        @include normalHeading();
        @include mobile {
            font-size: toRem(14);
        }
    }
    .news-wrapper {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: toRem(65) 1rem;
        align-items: flex-end;
        margin-bottom: toRem(68);
        @include mobile {
            gap: toRem(40) 1rem;
            margin-bottom: toRem(105);
            &.mb-nor {
                margin-bottom: toRem(46);
            }
        }
    }
    .news {
        width: calc(50% - .5rem);
        h3 {
            @include normalHeading();
            margin-bottom: 0;
            max-width: toRem(474);
            @include mobile {
                font-size: toRem(14);
                margin-bottom: 0;
            }
        }
        a.cta {
            @include linkWithArrow();
            margin-bottom: 1rem;
            &.hover {
                color: var(--color-text-hover);
                &:before {
                    background-position: center left toRem(5);
                    filter: invert(60%);
                }
            }
        }
        .news-meta {
            transition: .3s ease-in-out all;
        }
        .news-image {
            >a {
                display: block;
                min-height: 350px;
                max-height: 350px;
                position: relative;
                overflow: hidden;
                img {
                    height: 350px;
                    @include positionImage();
                }
                @include mobile {
                    min-height: 126px;
                    max-height: 126px;
                    img {
                        height: 126px;
                    }
                }
            }
            img {
                display: flex;
                will-change: transform;
                transition: transform .3s cubic-bezier(.23, 1, .32, 1);
                width: 100%;
            }
        }
        &.hover {
            .news-meta {
                color: var(--color-text-hover);
            }
            .news-image>a {
                img {
                    transform: scale(1.05);
                }
            }
        }
    }
    >a.cta {
        @include linkWithArrow();
        margin-left: calc(50% + .5rem);
        width: 50%;
    }
}