.featured-page-3 { position: relative; padding-bottom: 103px; .featured-page { width: 43%; display: inline-block; margin-left: 60px; float: right; position: relative; p { font-weight: 400; @include font-size(1.7); display: inline; line-height: 1.9; opacity: 0.8; } &:before { content: attr(data-line); position: absolute; top: -55px; left: 75px; right: 0; bottom: 0; width: 0; height: 0; z-index: -1; opacity: 0.05; @include font-size(40); font-weight: 100; color: $color__black; } } .featured-page__continue { text-transform: uppercase; font-weight: 600; @include font-size(1.7); letter-spacing: 0.05em; margin-left: 10px; &:after { content: '\f0da'; @include fa-icon(); margin-left: 8px; } } .featured-page__title { margin-top: 185px; margin-bottom: 10px; } img { width: 50%; max-height: 357px; object-fit: cover; border: 7px solid #fff; box-shadow: 1px 0 36px rgba(0,0,0,0.15); margin-top: 100px; } } @media (max-width: 1279px) { .featured-page-3 { img { width: 45%; } } } @media (max-width: 1023px) { .featured-page-3 { .featured-page__title { padding-top: 90px; } } } @media (max-width: 991px) { .featured-page-3 { .featured-page { width: 97%; display: block; margin-bottom: 100px; &:before { display: none; } } .featured-page__title { margin-top: 100px; padding-top: 0; } img { width: 94%; margin-left: 3%; } } } @media (max-width: 480px) { .featured-page-3 { .featured-page { margin-bottom: 45px; } img { margin-top: 45px; } h3 { @include font-size(3.2); } .featured-page__title { margin-top: 40px; } .featured-page__continue { @include font-size(1.5); } } .featured-page-3.featured-page-3 p { @include font-size(1.4); } }