/* -------------------------------------- home section 8 | Top News Our Campaign --------------------------------------- */ /* wraper area */ /* campaign members */ .campaign-members { background-image: url(../../images/members/member-bg.jpg); background-repeat: no-repeat; background-position: center 27.5rem; position: relative; margin: auto; margin-bottom: 4rem; } .campaign-members__header { margin-bottom: 3rem; width: 100%; text-align: center; } .campaign-members__header--title { font-family: "Montserrat", sans-serif; font-weight: bold; font-size: 2.4rem; line-height: 3rem; text-transform: capitalize; margin-bottom: 0; text-align: center; } .campaign-members__list { display: flex; flex-direction: column; align-items: center; padding: 0 1.5rem; width: 100%; } .campaign-members__list-item { margin-bottom: 1.5rem; max-width: 100%; } .campaign-members__list-item:nth-last-of-type(1) { margin-bottom: 0; } .campaign-members__list-item figure { background-color: #fddbdb; width: 35rem; height: 40rem; max-height: 100%; max-width: 100%; position: relative; display: flex; align-items: flex-end; justify-content: center; border-radius: 1.5rem; margin-bottom: 0; overflow: hidden; z-index: 0; padding: 0 1.5rem; } .campaign-members__list-item:nth-child(1n) figure { background-color: #fddbdb; } .campaign-members__list-item:nth-child(2n) figure { background-color: #ffddaa; } .campaign-members__list-item:nth-child(3n) figure { background-color: #d1e9ff; } .campaign-members__list-item:nth-child(4n) figure { background-color: #e6e1f4; } .campaign-members__list-item:nth-child(5n) figure { background-color: #c9f2ff; } .campaign-members__list-item:nth-child(6n) figure { background-color: #ffe4fb; } .campaign-members__list-item figure img { margin-bottom: 0; transition: all 0.5s ease; } .campaign-members__list-item figure img:hover { transform: scale(1.1); } .campaign-members__list-item figure:before { content: attr(data-title); position: absolute; font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 75px; line-height: 115.4%; letter-spacing: -0.1rem; color: rgba(0, 0, 0, 0.09); transform: rotate(-90deg); transform-origin: 0 0; bottom: auto; top: 100%; left: 0; padding-left: 1.5rem; z-index: -1; } .campaign-members__list-item figcaption { display: flex; flex-direction: column; justify-content: center; position: absolute; background: rgba(53, 53, 53, 0.8); border-radius: 15px; padding: 3rem; height: 100%; top: 100%; -webkit-transition: all ease-out 0.5s; -moz-transition: all ease-out 0.5s; -o-transition: all ease-out 0.5s; transition: all ease-out 0.5s; } .campaign-members__list-item:hover figcaption { top: 0; } .campaign-members__list-item figcaption h3 { font-family: "Montserrat", sans-serif; font-weight: bold; font-size: 2.4rem; line-height: 2.7rem; color: #ffffff; margin-bottom: 2rem; text-transform: capitalize; } .campaign-members__list-item figcaption p { font-family: "Open Sans", sans-serif; font-weight: normal; font-size: 1.6rem; line-height: 2.3rem; color: #ffffff; margin-bottom: 1.5rem; } .follow { display: flex; } .follow li { margin-right: 1.6rem; } .follow li:last-child { margin-right: 0; } .loadmorebox { margin-bottom: 3rem; } @media (min-width: 576px) { .campaign-members__list { flex-direction: row; flex-wrap: wrap; padding: 0; } .campaign-members__list-item { width: 50%; padding-left: 1.5rem; padding-right: 1.5rem; margin-bottom: 3rem; } .campaign-members__list-item:nth-last-of-type(2) { margin-bottom: 0; } .campaign-members__list-item figure { height: 35rem; } .loadmorebox { margin-bottom: 4rem; } } @media (min-width: 768px) { .campaign-members { margin-bottom: 3rem; } .campaign-members__header { margin-bottom: 4rem; } .campaign-members__list-item figure { width: 35rem; height: 40rem; } .campaign-members__list-item figcaption { padding: 5rem 4rem; } .campaign-members__list-item figcaption h3 { font-size: 3rem; line-height: 3.7rem; margin-bottom: 3rem; } .campaign-members__list-item figcaption p { margin-bottom: 3rem; line-height: 2.6rem; } .loadmorebox { margin-bottom: 5rem; } } @media (min-width: 992px) { .campaign-members { margin-bottom: 4rem; } .campaign-members__header { margin-bottom: 5rem; } .campaign-members__header--title { font-size: 3rem; line-height: 3.6rem; } .campaign-members__list-item { width: 33.33%; } .campaign-members__list-item:nth-last-of-type(3) { margin-bottom: 0; } .loadmorebox { margin-bottom: 6rem; } } @media (min-width: 1366px) { .campaign-members { margin-bottom: 9.5rem; } .campaign-members__header { margin-bottom: 6rem; } .loadmorebox { margin-bottom: 8rem; } } @media (min-width: 1920px) { .campaign-members__header { margin-bottom: 8rem; } }