*,
*::after,
*::before {
box-sizing: border-box;
}
a {
text-decoration: none;
}
html,
body {
margin: 0;
}
p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
input,
button,
textarea {
margin: 0;
}
html {
font-size: 62.5%;
scroll-behavior: smooth;
}
body {
margin: 0;
}
html,
body {
max-width: 100%;
overflow-x: clip;
}
html.body-lock,
body.body-lock {
overflow: hidden !important;
}
body,
input,
button,
textarea {
font-family: "Poppins", sans-serif;
font-size: 1.6rem;
line-height: 160%;
}
img {
display: block;
max-width: 100%;
}
a {
text-decoration: none;
color: inherit;
}
ul {
list-style: none;
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 400;
}
.text-h1 {
font-size: 8rem;
line-height: 120%;
}
@media (max-width: 991px) {
.text-h1 {
font-size: 6.4rem;
}
}
@media (max-width: 650px) {
.text-h1 {
font-size: 4.8rem;
}
}
.text-h2 {
font-size: 4.8rem;
line-height: 130%;
}
@media (max-width: 991px) {
.text-h2 {
font-size: 4rem;
}
}
@media (max-width: 650px) {
.text-h2 {
font-size: 3.2rem;
}
}
.text-h3 {
font-size: 2.3rem;
line-height: 155%;
}
@media (max-width: 991px) {
.text-h3 {
font-size: 2.2rem;
line-height: 150%;
}
}
@media (max-width: 650px) {
.text-h3 {
font-size: 2rem;
line-height: 145%;
}
}
.font-light {
font-weight: 300;
}
.font-regular {
font-weight: 400;
}
.font-medium {
font-weight: 500;
}
.font-bold {
font-weight: 700;
}
.duration-200 {
transition-duration: 0.2s;
}
.duration-250 {
transition-duration: 0.25s;
}
.duration-300 {
transition-duration: 0.3s;
}
.transition-all {
transition-property: all;
}
.transition-opacity {
transition-property: opacity;
}
.transition-transform {
transition-property: transform;
}
.transition-color {
transition-property: color;
}
.transition-background {
transition-property: background;
}
.ease-in-out {
transition-timing-function: ease-in-out;
}
.ease-out {
transition-timing-function: ease-out;
}
.flex {
display: flex;
}
.items-start {
align-items: flex-start;
}
.items-center {
align-items: center;
}
.items-end {
align-items: flex-end;
}
.justify-start {
justify-content: flex-start;
}
.justify-center {
justify-content: center;
}
.justify-end {
justify-content: flex-end;
}
.justify-between {
justify-content: space-between;
}
.flex-col {
flex-direction: column;
}
.grid {
display: grid;
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.header {
padding: 1.6rem 0;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
transition: transform 0.28s ease-out;
}
@media (max-width: 650px) {
.header {
padding: 1.2rem 0;
}
}
.header--hidden {
transform: translateY(-100%);
}
.header--hidden .header__menu--mobile {
display: none !important;
}
.header:not(.header--hidden) ~ main > .hero .header__menu--mobile {
display: none !important;
}
@media (max-width: 650px) {
.header .container {
padding: 0 0.7rem;
}
}
.header__wrapper {
padding: 2rem 4rem;
background: linear-gradient(to left, #c11e41, #220b34);
border-radius: 2.4rem;
color: white;
position: relative;
align-items: center;
}
.header__wrapper--post {
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
@media (max-width: 991px) {
.header__wrapper {
padding: 1.8rem 3.2rem;
border-radius: 1.6rem;
}
}
@media (max-width: 650px) {
.header__wrapper {
padding: 1.6rem 2.2rem;
}
}
@media (max-width: 1099px) {
.header__cta {
display: none !important;
}
}
.header__nav {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
width: 60%;
}
@media (max-width: 1099px) {
.header__nav {
display: none;
}
}
.header__nav-items {
gap: 3.6rem;
}
.header__nav-item {
font-size: 1.6rem;
line-height: 2.4rem;
font-weight: 500;
}
.header__action {
padding: 0.8rem 4rem;
background: linear-gradient(270deg, #f41c5d 0%, #fe7a7c 100%);
border-radius: 0 0 2.4rem 2.4rem;
gap: 1.6rem;
}
@media (max-width: 991px) {
.header__action {
padding: 0.8rem 3rem;
}
}
@media (max-width: 650px) {
.header__action {
padding: 0.8rem 2rem;
}
}
.header__action-text {
font-size: 1.4rem;
line-height: 2.1rem;
font-weight: 600;
color: white;
}
.header__action-cta {
min-width: -moz-fit-content;
min-width: fit-content;
}
@media (min-width: 1099px) {
.header__hamburger {
display: none;
}
}
.header__menu--mobile {
position: fixed;
top: 8.2rem;
left: 0;
width: 100%;
height: calc(100% - 8.2rem);
opacity: 0;
visibility: hidden;
z-index: -1;
transform: translateY(2rem);
transition: all 0.2s ease-out;
}
.header__menu--mobile.active {
opacity: 1;
visibility: visible;
z-index: 10;
transform: none;
}
main .header__menu--mobile {
top: 8.6rem;
left: 0;
width: 100%;
height: calc(100% - 8.6rem);
}
.mobileMenu__wrapper {
background: linear-gradient(to left, #c11e41, #220b34);
padding: 1.8rem 3.2rem;
border-bottom-left-radius: 1.6rem;
border-bottom-right-radius: 1.6rem;
gap: 4rem;
color: white;
}
@media (max-width: 650px) {
.mobileMenu__wrapper {
padding: 1.6rem 2.2rem;
}
}
.mobileMenu__menu-nav-items {
gap: 2rem;
}
.mobileMenu__menu-nav-item {
font-size: 2rem;
line-height: 3rem;
}
.mobileMenu__menu--small {
gap: 1.6rem;
font-size: 1.6rem;
line-height: 2.4rem;
}
.mobileMenu__socials {
gap: 1.2rem;
}
.mobileMenu__socials-items {
gap: 2rem;
}
.mobileMenu__socials-items img {
max-width: 2.8rem;
min-width: 2.8rem;
max-height: 2.8rem;
min-height: 2.8rem;
}
.mobileMenu__buttons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.6rem;
}
.mobileMenu__buttons > * {
width: 100%;
min-width: 100%;
max-width: 100%;
text-align: center;
}
@media (max-width: 395px) {
.mobileMenu__buttons {
grid-template-columns: 1fr;
}
}
.hamburger {
display: block;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible;
}
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
background-color: #000;
}
.hamburger-box {
width: 4.8rem;
height: 4.8rem;
display: inline-block;
position: relative;
background-color: white;
border-radius: 1rem;
border: 1px solid #e1e6ef;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px;
}
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
width: 16px;
height: 2px;
background-color: #000;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease;
}
.hamburger-inner::before,
.hamburger-inner::after {
content: "";
display: block;
}
.hamburger-inner::before {
top: -6px;
}
.hamburger-inner::after {
bottom: -6px;
}
.hamburger--squeeze .hamburger-inner {
transition-duration: 0.075s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--squeeze .hamburger-inner::before {
transition: top 0.075s 0.12s ease, opacity 0.075s ease;
}
.hamburger--squeeze .hamburger-inner::after {
transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--squeeze.is-active .hamburger-inner {
transform: rotate(45deg);
transition-delay: 0.12s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--squeeze.is-active .hamburger-inner::before {
top: 0;
opacity: 0;
transition: top 0.075s ease, opacity 0.075s 0.12s ease;
}
.hamburger--squeeze.is-active .hamburger-inner::after {
bottom: 0;
transform: rotate(-90deg);
transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.footer {
color: white;
margin-top: 6rem;
margin-bottom: 2rem;
}
@media (max-width: 991px) {
.footer {
margin-top: 5rem;
}
}
@media (max-width: 767px) {
.footer {
margin-top: 4rem;
}
}
@media (max-width: 767px) {
.footer .container {
padding: 0 0.7rem;
}
}
.footer__wrapper {
background-color: #261941;
padding: 3.5rem 4rem 8rem;
border-radius: 2.4rem;
}
@media (max-width: 991px) {
.footer__wrapper {
padding: 4.4rem 2.4rem 9rem;
}
}
@media (max-width: 767px) {
.footer__wrapper {
padding: 5.4rem 1.6rem 10rem;
}
}
.footer-grid {
grid-template-columns: 533fr 757fr;
gap: 3rem;
}
@media (max-width: 767px) {
.footer-grid {
grid-template-columns: 1fr;
gap: 5.2rem;
}
}
.footer__title {
font-size: 4rem;
line-height: 5.2rem;
font-weight: 600;
}
@media (max-width: 991px) {
.footer__title {
font-size: 3.2rem;
line-height: 4.2rem;
}
}
@media (max-width: 767px) {
.footer__title {
font-size: 2.4rem;
line-height: 3.4rem;
text-align: center;
}
}
.footer__text {
font-size: 1.6rem;
line-height: 2.4rem;
}
@media (max-width: 767px) {
.footer__text {
font-size: 1.4rem;
line-height: 2.1rem;
padding-bottom: 0.8rem;
text-align: center;
}
}
.footer__top-left {
gap: 3rem;
}
@media (max-width: 991px) {
.footer__top-left {
gap: 2.4rem;
}
}
@media (max-width: 767px) {
.footer__top-left {
gap: 1.6rem;
align-items: center;
}
}
.footer__image {
max-width: 100%;
min-width: 100%;
}
.footer__bottom {
padding-top: 8rem;
}
@media (max-width: 991px) {
.footer__bottom {
padding-top: 7.6rem;
}
}
@media (max-width: 767px) {
.footer__bottom {
padding-top: 7.2rem;
}
}
.footer__logo {
max-height: 2rem;
width: -moz-fit-content;
width: fit-content;
display: inline-block;
text-align: left;
margin-bottom: 1.4rem;
}
.footer__copyright {
font-size: 1.4rem;
line-height: 2.4rem;
}
.footer__bottom-right {
grid-template-columns: 1fr 1fr 1fr;
gap: 3rem;
}
@media (max-width: 767px) {
.footer__bottom-right {
padding-top: 1rem;
grid-template-columns: 1fr 1fr;
row-gap: 6.2rem;
-moz-column-gap: 1.6rem;
column-gap: 1.6rem;
}
}
.footer__menu {
gap: 1.6rem;
}
.footer__menu-items {
display: flex;
flex-direction: column;
gap: 1.6rem;
}
.footer__menu-title {
font-size: 1.8rem;
line-height: 3.4rem;
font-weight: 500;
}
.footer__menu-item {
font-size: 1.6rem;
line-height: 2.4rem;
}
@media (max-width: 650px) {
.footer__menu-item {
font-size: 1.4rem;
line-height: 2.1rem;
}
}
.footer__menu-item--social {
display: flex;
align-items: center;
gap: 0.8rem;
}
body {
color: #212121;
padding-top: 2rem;
background-color: #f9f9f9;
}
html:has(body.lock) {
height: 100%;
overflow: hidden;
}
.container {
max-width: 123.2rem !important;
margin: 0 auto;
padding: 0 1.6rem;
}
.container--large {
max-width: 143.2rem !important;
}
.cta {
display: block;
font-size: 1.6rem;
line-height: 2.4rem;
padding: 1rem 2rem;
font-weight: 500;
color: #212121;
border-radius: 2.4rem;
background-color: #f9f9f9;
max-width: -moz-fit-content;
max-width: fit-content;
transition: padding 0.2s ease-out;
}
@media (min-width: 651px) {
.cta:hover {
padding: 1rem 2.6rem;
}
}
.cta--dark {
background-color: #212121;
color: white;
padding: 0.5rem 1.6rem;
font-size: 1.4rem;
line-height: 2.1rem;
font-weight: 600;
}
@media (min-width: 651px) {
.cta--dark:hover {
padding: 0.5rem 1.6rem;
}
}
.cta--colourful {
background: linear-gradient(270deg, #f41c5d 0%, #fe7a7c 100%);
color: white;
padding: 1.3rem 2.6rem;
font-weight: 600;
font-size: 1.8rem;
line-height: 3.2rem;
border-radius: 9999px;
transition: transform 0.2s ease-out;
}
@media (min-width: 651px) {
.cta--colourful:hover {
padding: 1.3rem 2.6rem;
transform: translateY(-0.6rem);
}
}
iframe {
max-width: 100% !important;
}
.footer__menu a,
.header__nav a {
position: relative;
max-width: -moz-fit-content;
max-width: fit-content;
}
@media (min-width: 651px) {
.footer__menu a::before,
.header__nav a::before {
content: "";
width: 100%;
height: 2px;
right: 0;
bottom: -3px;
background-color: white;
position: absolute;
width: 0%;
transition: width 0.2s ease-out;
}
.footer__menu a:hover::before,
.header__nav a:hover::before {
width: 100%;
left: 0;
}
}
.hero__wrapper {
background: linear-gradient(to left, #c11e41, #220b34);
border-radius: 2.4rem;
}
.hero__content {
padding: 6rem 2rem 8rem;
max-width: 94.8rem;
margin: 0 auto;
color: white;
gap: 2.4rem;
text-align: center;
}
@media (max-width: 991px) {
.hero__content {
padding: 4rem 2rem 5.5rem;
gap: 1.6rem;
}
}
@media (max-width: 650px) {
.hero__content {
padding: 2rem 2rem 3rem;
gap: 0.8rem;
}
}
.hero__textAboveTitle {
color: #f41c5d;
font-size: 3.2rem;
line-height: 4.8rem;
font-weight: 600;
}
@media (max-width: 991px) {
.hero__textAboveTitle {
font-size: 2.4rem;
line-height: 3.6rem;
}
}
@media (max-width: 650px) {
.hero__textAboveTitle {
font-size: 1.4rem;
line-height: 2.1rem;
}
}
.hero__title {
font-size: 6.4rem;
line-height: 7.4rem;
font-weight: 600;
letter-spacing: -0.256rem;
text-align: center;
}
@media (max-width: 991px) {
.hero__title {
font-size: 5.2rem;
line-height: 6.2rem;
}
}
@media (max-width: 650px) {
.hero__title {
font-size: 4rem;
line-height: 6rem;
}
}
.hero__text {
font-size: 1.8rem;
line-height: 2.7rem;
text-align: center;
}
@media (max-width: 991px) {
.hero__text {
font-size: 1.6rem;
line-height: 2.4rem;
}
}
@media (max-width: 650px) {
.hero__text {
font-size: 1.4rem;
line-height: 2.1rem;
}
}
.embla {
position: relative;
}
.embla__viewport {
overflow: hidden;
}
.embla__container {
display: flex;
}
.embla__slide {
flex: 0 0 100%;
min-width: 0;
}
@media (min-width: 651px) {
.embla__next,
.embla__prev,
.embla__button {
transition: background-color 0.2s ease-in-out;
}
.embla__next:hover,
.embla__prev:hover,
.embla__button:hover {
background-color: #3f3f3f;
}
}
@media (max-width: 650px) {
.banner .container {
padding: 0 0.7rem;
}
}
.banner__wrapper {
background-color: black;
color: white;
border-radius: 2.4rem;
overflow: hidden;
padding: 8rem 4rem 5.2rem;
position: relative;
min-height: 50.5rem;
display: grid;
align-items: center;
}
@media (max-width: 991px) {
.banner__wrapper {
padding: 10.4rem 3.7rem 8rem;
border-radius: 2rem;
}
}
@media (max-width: 650px) {
.banner__wrapper {
padding: 12.8rem 3.4rem 10.2rem;
min-height: none;
border-radius: 1.6rem;
}
}
.banner__content {
position: relative;
z-index: 3;
gap: 2.4rem;
}
@media (max-width: 991px) {
.banner__content {
gap: 2.8rem;
}
}
@media (max-width: 650px) {
.banner__content {
gap: 3.2rem;
text-align: center;
align-items: center;
}
}
.banner__title {
font-size: 6.4rem;
line-height: 7.4rem;
letter-spacing: -0.256rem;
font-weight: 600;
max-width: 64.8rem;
}
@media (max-width: 991px) {
.banner__title {
font-size: 5.2rem;
line-height: 6.2rem;
}
}
@media (max-width: 650px) {
.banner__title {
font-size: 3.6rem;
line-height: 4.6rem;
}
}
.banner__text {
font-size: 1.8rem;
line-height: 2.6rem;
letter-spacing: 0.015rem;
padding-bottom: 1.6rem;
max-width: 60rem;
}
@media (max-width: 650px) {
.banner__text {
font-size: 1.6rem;
line-height: 2.4rem;
}
}
.banner__gradient {
position: absolute;
left: 0;
top: 0;
width: 70%;
height: 100%;
z-index: 2;
background: linear-gradient(89.98deg, #080403 39.24%, rgba(8, 4, 3, 0) 102.87%);
}
@media (max-width: 1199px) {
.banner__gradient {
background: linear-gradient(360deg, #110921 -11.59%, rgba(17, 9, 33, 0.5) 68.99%, rgba(17, 9, 33, 0) 122.72%);
width: 100%;
}
}
.banner__image {
position: absolute;
z-index: 1;
width: 50%;
min-width: 100rem;
min-height: 100%;
left: 30%;
top: 50%;
transform: translateY(-50%);
-o-object-fit: cover;
object-fit: cover;
}
@media (max-width: 991px) {
.banner__image {
left: auto;
right: 0;
}
}
@media (max-width: 650px) {
.banner__image {
min-width: 60rem;
}
}
@media (max-width: 650px) {
.banner__cta {
font-size: 1.6rem;
line-height: 3.2rem;
padding: 1rem 2.4rem;
}
}
.posts__wrapper {
gap: 2rem;
}
.posts__title {
font-size: 3.2rem;
line-height: 4.8rem;
font-weight: 600;
}
.posts__see-all {
font-size: 1.6rem;
line-height: 2.4rem;
font-weight: 500;
color: #909090;
gap: 0.6rem;
transition: color 0.2s ease-in-out;
}
@media (min-width: 651px) {
.posts__see-all:hover {
color: #212121;
}
.posts__see-all:hover .posts__post-read-more-icon {
background: url(https://flirtist.ai/blog/wp-content/themes/wingmanx/icons/read-more-icon-dark-grey.svg);
background-size: contain;
}
}
.posts__grid {
grid-template-columns: 1fr 1fr 1fr;
row-gap: 2rem;
-moz-column-gap: 1.5rem;
column-gap: 1.5rem;
}
@media (max-width: 991px) {
.posts__grid {
grid-template-columns: 1fr 1fr;
gap: 1.8rem;
}
}
@media (max-width: 650px) {
.posts__grid {
gap: 1.6rem;
grid-template-columns: 1fr;
}
}
.posts__post {
padding: 1.5rem 1.5rem 2rem;
border-radius: 1.5rem;
background-color: #efefef;
}
@media (min-width: 651px) {
.posts__post:hover .posts__post-title {
color: #f41c5d;
}
.posts__post:hover .posts__post-read-more {
gap: 0.9rem;
}
}
.posts__post-image-wrapper {
position: relative;
}
.posts__image {
border-radius: 1.2rem;
-o-object-fit: cover;
object-fit: cover;
aspect-ratio: 360/185;
overflow: hidden;
-o-object-position: center;
object-position: center;
max-width: 100%;
min-width: 100%;
width: 100%;
}
.posts__post-categories {
display: flex;
align-items: center;
gap: 0.8rem;
flex-wrap: wrap;
position: absolute;
top: 1.6rem;
left: 1.6rem;
width: calc(100% - 3.2rem);
z-index: 1;
}
.posts__post-category {
padding: 0.1rem 1.6rem;
font-size: 1.6rem;
line-height: 2.4rem;
color: white;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 0.8rem;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.posts__post-date {
padding-top: 1.8rem;
font-size: 1.4rem;
line-height: 2.1rem;
color: #909090;
}
.posts__post-title {
font-size: 1.8rem;
line-height: 2.7rem;
font-weight: 600;
padding: 0.8rem 0 1.6rem;
transition: color 0.2s ease-in-out;
}
.posts__post-read-more {
font-size: 1.6rem;
line-height: 2.4rem;
font-weight: 500;
color: #909090;
gap: 0.6rem;
transition: color 0.2s ease-in-out, gap 0.2s ease-in-out;
}
.posts__post-read-more-icon {
display: block;
min-width: 0.7rem;
min-height: 1rem;
max-width: 0.7rem;
max-height: 1rem;
background: url(https://flirtist.ai/blog/wp-content/themes/wingmanx/icons/read-more-icon.svg);
background-size: contain;
transition: background 0.2s ease-in-out;
}
.pagination__wrapper {
display: flex;
align-items: center;
gap: 3rem;
justify-content: center;
font-size: 1.8rem;
line-height: 2.7rem;
font-weight: 600;
}
.pagination__wrapper a {
color: #909090;
transition: color 0.2s ease-in-out;
}
@media (min-width: 651px) {
.pagination__wrapper a:hover {
color: #212121;
}
}
.pagination__wrapper > span {
width: 2.7rem;
height: 2.7rem;
border-radius: 0.4rem;
border: 2px solid #c0c0c0;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.back-to-blog {
max-width: -moz-fit-content;
max-width: fit-content;
gap: 0.6rem;
font-size: 1.8rem;
line-height: 2.7rem;
font-weight: 600;
margin-bottom: 4rem;
}
@media (max-width: 991px) {
.back-to-blog {
margin: -2rem 0 3rem;
}
}
@media (max-width: 650px) {
.back-to-blog {
margin: -2rem 0 2rem;
}
}
.author__wrapper {
border-radius: 2rem;
padding: 1.6rem;
background-color: #efefef;
gap: 1.6rem;
}
.author__image {
max-width: 9rem;
max-height: 9rem;
min-width: 9rem;
min-height: 9rem;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
border-radius: 1.4rem;
}
.author__top {
gap: 1.6rem;
}
.author__top-data {
gap: 0.8rem;
}
.author__top-name {
font-size: 3.2rem;
line-height: 4.8rem;
font-weight: 600;
}
@media (max-width: 991px) {
.author__top-name {
font-size: 2.4rem;
line-height: 3.6rem;
}
}
@media (max-width: 650px) {
.author__top-name {
font-size: 1.8rem;
line-height: 2.7rem;
}
}
.author__top-role {
font-size: 1.6rem;
line-height: 2.4rem;
color: #909090;
}
@media (max-width: 650px) {
.author__top-role {
font-size: 1.4rem;
line-height: 2.1rem;
}
}
.author__top-location {
gap: 0.4rem;
font-size: 1.6rem;
line-height: 2.4rem;
}
@media (max-width: 650px) {
.author__top-location {
font-size: 1.4rem;
line-height: 2.1rem;
}
}
.author__description {
font-size: 1.8rem;
line-height: 2.7rem;
display:flex;
flex-direction: column;
gap: 1.6rem;
}
@media (max-width: 650px) {
.author__description {
font-size: 1.6rem;
line-height: 2.4rem;
}
}
.author__socials {
gap: 2rem;
flex-wrap: wrap;
}
@media (max-width: 991px) {
.author__socials {
gap: 1.5rem;
}
}
@media (max-width: 650px) {
.author__socials {
gap: 1rem;
}
}
.author__social img {
display: block;
max-width: 2.6rem;
max-height: 2.6rem;
min-width: 2.6rem;
min-height: 2.6rem;
}
@media (max-width: 991px) {
.author__social img {
max-width: 2.2rem;
max-height: 2.2rem;
min-width: 2.2rem;
min-height: 2.2rem;
}
}
@media (max-width: 650px) {
.author__social img {
max-width: 2rem;
max-height: 2rem;
min-width: 2rem;
min-height: 2rem;
}
}
.embla__dots {
gap: 0.8rem !important;
}
.embla__dot {
max-width: 8px;
max-height: 8px;
min-width: 8px;
min-height: 8px;
}
.embla__dot--selected {
background: linear-gradient(270deg, #f41c5d 0%, #fe7a7c 100%) !important;
}
.featured {
padding-top: 5rem;
}
.featured--no-p {
padding-top: 0;
}
.featured__wrapper {
gap: 2.4rem;
}
.featured__title {
font-size: 3.2rem;
line-height: 4.8rem;
font-weight: 600;
}
.featured .embla__container {
gap: 1.5rem;
}
.featured .embla__slide {
flex: 0 0 calc(33.3333% - 1rem);
min-width: 0;
}
@media (max-width: 991px) {
.featured .embla__slide {
flex: 0 0 calc(50% - 1rem);
}
}
@media (max-width: 650px) {
.featured .embla__slide {
flex: 0 0 100%;
}
}
.featured__post {
display: block;
position: relative;
overflow: hidden;
border-radius: 1.2rem;
padding: 2.4rem;
display: flex;
height: 100%;
align-items: stretch;
min-height: 100%;
min-height: 26.8rem;
}
@media (min-width: 651px) {
.featured__post:hover .featured__post-read-more {
color: white;
gap: 0.9rem;
}
.featured__post:hover .featured__post-image {
transform: scale(1.1);
}
}
.featured__post-image {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
transition: transform 0.2s ease-in-out;
}
.featured__post-gradient {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 2;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.6%, rgba(0, 0, 0, 0.5) 69.81%, rgba(0, 0, 0, 0.5) 100%);
}
.featured__post-content {
position: relative;
z-index: 3;
height: 100%;
justify-content: space-between;
gap: 8rem;
}
.featured__post-top {
gap: 0.8rem;
flex-wrap: wrap;
}
.featured__post-bottom {
gap: 0.8rem;
}
.featured__post-date {
font-size: 1.4rem;
line-height: 2.1rem;
color: #c0c0c0;
}
.featured__post-title {
font-size: 1.8rem;
line-height: 2.7rem;
font-weight: 600;
color: white;
transition: color 0.2s ease-in-out;
}
.featured__post-read-more {
font-size: 1.6rem;
line-height: 2.4rem;
font-weight: 500;
color: #909090;
gap: 0.6rem;
transition: color 0.2s ease-in-out, gap 0.2s ease-in-out;
}
.featured__post-read-more img {
max-width: 0.6rem !important;
min-width: 0.6rem !important;
max-height: 1rem !important;
min-height: 1rem !important;
-o-object-fit: contain;
object-fit: contain;
width: 0.6rem !important;
}
.featured__post-category {
font-size: 1.6rem;
line-height: 2.4rem;
padding: 0.1rem 1.6rem;
border-radius: 0.8rem;
background: rgba(255, 255, 255, 0.3);
color: white;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.featured__next, .featured__prev {
width: 7rem;
height: 7rem;
display: flex;
justify-content: center;
align-items: center;
background-color: #212121;
border-radius: 1.4rem;
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
@media (max-width: 991px) {
.featured__next, .featured__prev {
width: 4.8rem;
height: 4.8rem;
border-radius: 1rem;
}
.featured__next img, .featured__prev img {
max-width: 1.2rem;
}
}
@media (min-width: 651px) {
.featured__next, .featured__prev {
display: none;
}
}
@media (max-width: 650px) {
.featured__next, .featured__prev {
width: 2.8rem;
height: 2.8rem;
border-radius: 0.6rem;
}
.featured__next img, .featured__prev img {
max-width: 0.8rem;
}
}
.featured__prev {
left: -3rem;
}
@media (max-width: 1299px) {
.featured__prev {
left: -1.4rem;
}
}
.featured__next {
right: -3rem;
}
@media (max-width: 1299px) {
.featured__next {
right: -1.4rem;
}
}
@media (max-width: 650px) {
.banner {
max-width: calc(100vw - 3.2rem);
}
}