.sp-smart-show-pro { &.grid-six-container { .sp-smart-post-grid-six-large-contents { display: grid; gap: 8px; overflow: hidden; .sp-smart-post-card-image { a { width: 100%; height: 100%; } } &.grid-six-layout-one { .sp-smart-post-card { background: #f2f2f2; } } &.grid-six-layout-one, &.grid-six-layout-two { .sp-smart-post-card { display: flex; gap: 20px; } .sp-smart-post-card-image { width: 50%; flex-shrink: 0; height: 100%; } .sp-smart-post-template-one-content { margin-top: 10px; } } &.grid-six-layout-three { grid-template-columns: repeat(2, 1fr); .sp-smart-post-template-one-content { margin-top: 10px; } } &.grid-six-layout-one, &.grid-six-layout-two, &.grid-six-layout-three { .sp-smart-post-template-one-content { width: 100%; } .sp-smart-post-card-content { .sp-smart-post-meta-icon, .sp-smart-post-meta-text, .sp-smart-post-title { color: #4E4F52; } .sp-smart-post-read-more-button { .sp-readmore-btn-link { color: #4E4F52 !important; border-color: #4E4F52; } } } .overlay-custom { background-color: transparent !important; } } &.grid-six-layout-four { grid-template-columns: repeat(2, 1fr); // height: 400px; .sp-smart-post-card-image { height: 100% !important; } .sp-smart-post-card-content * { position: relative; z-index: 1; .sp-social-share-popup-icon.sp-social-popup-icon-list { position: absolute; } } .sp-smart-post-card-content { height: fit-content; padding: 0 20px 20px; // .sp-smart-post-title { // color: #FFFFFF; // } // .sp-social-share-popup-icon.popup-share-icon svg path { // fill: #FFFFFF; // } // .sp-smart-post-read-more-button { // .sp-readmore-btn-link { // color: #FFFFFF; // border-color: #FFFFFF; // } // } // .sp-smart-post-details { // .sp-smart-post-meta { // .sp-smart-post-meta-icon svg path { // fill: #FFFFFF; // } // i, // .sp-smart-post-meta-text { // color: #FFFFFF; // } // } // } } } .image-overlay { background: transparent; // &.overlay-custom { // background-color: transparent !important; // } } } .sp-smart-post-grid-six-dynamic-contents { display: grid; gap: 8px; .sp-smart-post-excerpt { display: none; } &.grid-six-layout-one { grid-template-columns: repeat(3, 1fr); .sp-smart-post-card { .sp-smart-post-template-one-content { height: 100%; .sp-smart-post-card-content * { position: relative; z-index: 1; .sp-social-share-popup-icon.sp-social-popup-icon-list { position: absolute; } } .sp-smart-post-card-content { position: relative; display: flex; box-sizing: border-box; padding: 0 20px 20px; .sp-smart-post-category, .sp-smart-post-read-more-button { display: none !important; } // .sp-smart-post-title { // color: #FFFFFF; // } .sp-social-share-popup-icon.popup-share-icon svg path { fill: #FFFFFF; } // .sp-smart-post-details { // .sp-smart-post-meta { // .sp-smart-post-meta-icon svg path { // fill: #FFFFFF; // } // i, // .sp-smart-post-meta-text { // color: #FFFFFF; // } // } // } } } } .sp-smart-post-read-more-button, .sp-smart-post-category { display: none !important; } } &.grid-six-layout-one .sp-smart-post-card-content { flex-direction: column; // .sp-smart-post-meta-icon svg path, // .sp-smart-post-meta-icon, // .sp-smart-post-meta-text, // .sp-smart-post-title { // color: #fff; // fill: #fff; // } // .sp-smart-post-read-more-button { // .sp-readmore-btn-link { // color: #fff !important; // border-color: #fff; // } // } } // &.grid-six-layout-two{ // .sp-smart-post-card { // display: flex; // } // } &.grid-six-layout-two, &.grid-six-layout-three { .image-overlay { &.overlay-custom { background-color: transparent !important; } } } &.grid-six-layout-three, &.grid-six-layout-two, &.grid-six-layout-four { .sp-smart-post-card { display: flex; flex-direction: row; align-items: center; gap: 10px !important; .sp-smart-post-card-image { width: 40%; height: 160px; img { object-fit: cover; } } .sp-smart-post-template-one-content { width: 60%; } .sp-smart-post-card-content { padding: 0; // .sp-smart-post-meta-icon svg path, // .sp-smart-post-meta-icon, // .sp-smart-post-meta-text, // .sp-smart-post-title { // color: #4E4F52; // fill: #4E4F52; // } .sp-smart-post-read-more-button { .sp-readmore-btn-link { color: #4E4F52 !important; border-color: #4E4F52; } } } } .sp-smart-post-read-more-button, .sp-smart-post-category { display: none !important; } } &.grid-six-layout-four { .sp-smart-post-card-image { .image-overlay { background: none !important; } } } } } } .grid-six-container .sp-smart-post-card .sp-smart-post-card-image img { width: 100% !important; height: 100% !important; } .grid-six-container { .sp-smart-post-card-content .sp-social-share-popup.space-between-taxonomy .sp-social-share-popup-icon.sp-social-popup-icon-list { bottom: unset; left: unset; top: calc(100% + 16px); &::before { top: unset; bottom: 100%; border-top: unset; border-bottom: 8px solid #fff; ; } &:after { border-top: unset; } } .sp-smart-post-card-content .sp-social-share-popup.beside-taxonomy .sp-social-share-popup-icon.sp-social-popup-icon-list { bottom: unset; left: unset; top: calc(100% + 16px); &::before { top: unset; bottom: 100%; border-top: unset; border-bottom: 8px solid #fff; ; } &:after { border-top: unset; } } } @media only screen and (max-width: 767px) { .sp-smart-post-wrapper.sp-smart-post-grid-six .sp-smart-post-grid-six-large-contents:not(.grid-six-layout-four) { .sp-smart-post-card-image { width: auto !important; } .sp-smart-post-card { background: transparent !important; } } .sp-smart-post-wrapper.sp-smart-post-grid-six .sp-smart-post-grid-six-dynamic-contents:not(.grid-six-layout-one) .sp-smart-post-card { flex-direction: column; } .sp-smart-show-pro.grid-six-container .sp-smart-post-grid-six-dynamic-contents:not(.grid-six-layout-one) .sp-smart-post-card .sp-smart-post-template-one-content, .sp-smart-show-pro.grid-six-container .sp-smart-post-grid-six-dynamic-contents:not(.grid-six-layout-one) .sp-smart-post-card .sp-smart-post-card-image { width: 100%; } } .sp-smart-post-grid-six { .sp-smart-post-grid-six-dynamic-contents { .sp-smart-post-card-image a { height: 100%; width: 100%; } } .sp-smart-post-grid-six-dynamic-contents.grid-six-layout-one { .sp-smart-post-card-image { // height: 100%; width: 100% !important; } } } // // title animate effect.................................................. .sp-smart-post-grid-six .sp-smart-post-card .sp-smart-post-title { position: relative; display: inline-block; } .sp-smart-post-grid-six .sp-smart-post-card .sp-smart-post-title:after { content: ""; position: absolute; transition: width 0.6s ease; } .sp-smart-post-grid-six .sp-smart-post-card .sp-smart-post-title::before { content: ""; position: absolute; transition: width 0.6s ease; } .sp-smart-post-grid-six .sp-smart-post-card .sp-smart-post-title .line { position: relative; display: inline-block; padding-bottom: 2px; } .sp-smart-post-grid-six .sp-smart-post-card .sp-smart-post-title .line::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; // height: 2px; // background: linear-gradient(90deg, #ff416c, #ff4b2b); // transform-origin: left; transform: scaleX(0); transition: transform 0.4s ease; z-index: -1; } .sp-smart-post-grid-six .sp-smart-post-card .sp-smart-post-title:hover .line::after { transform: scaleX(1); } /* Using :nth-of-type to target only .line elements */ .sp-smart-post-grid-six .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(1)::after { transition-delay: 0s; } .sp-smart-post-grid-six .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(2)::after { transition-delay: 0.2s; } .sp-smart-post-grid-six .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(3)::after { transition-delay: 0.4s; } .sp-smart-post-grid-six .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(4)::after { transition-delay: 0.6s; } .sp-smart-post-grid-six .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(5)::after { transition-delay: 0.8s; } .sp-smart-post-grid-six .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(6)::after { transition-delay: 1s; } .sp-smart-post-grid-six .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(7)::after { transition-delay: 1.2s; } .sp-smart-post-grid-six .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(8)::after { transition-delay: 1.4s; }