.save-the-children-title {
margin-top: 0;
padding-top: 3rem;
text-align: center;
font-size: 3.3rem;
margin-bottom: 1rem;
text-transform: uppercase;
font-weight: 900;
}
@media screen and (max-width: 1170px) {
.save-the-children-title {
font-size: 2.2rem;
}
}
.save-the-children-intro {
margin-top: 0;
text-align: center;
}
.save-the-children-title-intro {
flex-direction: column;
align-items: center;
max-width: 115rem;
margin: auto;
display: flex;
}
@media screen and (max-width: 1170px) {
.save-the-children-title-intro {
padding-inline: 2.2rem;
}
}
.young-artist {
margin-inline: auto;
max-width: 115rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
padding-top: 5rem;
padding-bottom: 5rem;
}
@media screen and (max-width: 1170px) {
.young-artist {
display: flex;
flex-direction: column;
justify-content: center;
grid-gap: 2rem;
}
}
.young-artist-quote {
grid-column: 2;
justify-self: end;
}
@media screen and (min-width: 1171px) {
.young-artist-quote {
padding-left: 10rem;
}
}
@media screen and (max-width: 1170px) {
.young-artist-quote {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
max-width: 40rem;
}
}
.anabely-quote {
font-size: 2.5rem;
font-style: italic;
text-align: center;
color: darkblue;
font-weight: 700;
}
@media screen and (max-width: 1170px) {
.anabely-quote {
font-size: 1.6rem;
}
}
.anabely-quote-2 {
text-align: center;
font-weight: 600;
padding-top: 1rem;
}
.story-behind-design {
font-size: 3.2rem;
padding-bottom: 1.5rem;
text-transform: uppercase;
font-weight: 900;
}
@media screen and (max-width: 1170px) {
.story-behind-design {
font-size: 2.2rem;
padding-bottom: 2rem;
text-align: center;
line-height: 1.3;
}
}
.background-story-container-bg {
background-color: #fefada;
}
@media screen and (max-width: 1170px) {
.background-story-container-bg {
padding-top: 2rem;
}
}
@media screen and (min-width: 801px) {
.background-story-container-bg {
margin-top: 2rem;
}
}
@media screen and (max-width: 800px) {
.background-story-container-bg {
margin-top: -2rem;
}
}
.background-story {
max-width: 115rem;
margin-inline: auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
padding-top: 3rem;
padding-bottom: 3rem;
}
@media screen and (max-width: 1170px) {
.background-story {
display: flex;
flex-direction: column;
justify-content: center;
grid-gap: 5rem;
max-width: 40rem;
}
}
.story-behind-design-paragraph-2 {
margin-top: 3rem;
}
.story-text p {
text-align: justify;
}
@media screen and (max-width: 1170px) {
.story-text p {
text-align-last: center;
}
}
.why-our-stickers-stand-out-h2 {
text-align: center;
padding-top: 5rem;
font-size: 3.2rem;
text-transform: uppercase;
font-weight: 900;
}
@media screen and (max-width: 1170px) {
.why-our-stickers-stand-out-h2 {
font-size: 2.2rem;
padding-inline: 1rem;
padding-top: 4rem;
line-height: 1.3;
}
}
img {
height: auto;
}
.save-the-children-logo {
margin-top: 12rem;
width: 15rem;
height: auto;
}
@media screen and (max-width: 1170px) {
.save-the-children-logo {
margin-top: 10rem;
}
}
.design-your-maxisticker-stc-title {
padding-top: 8rem;
text-align: center;
font-size: 3.2rem;
text-transform: uppercase;
font-weight: 900;
}
@media screen and (max-width: 1170px) {
.design-your-maxisticker-stc-title {
font-size: 2.2rem;
padding-top: 6rem;
}
}
#maxistickers-designs {
padding-top: 0;
}
.why-our-stickers-stand-out {
max-width: 124rem;
padding-inline: 1.5rem;
margin-inline: auto;
}
.why-our-stickers-stand-out-main {
margin-top: 0;
display: grid;
grid-template-columns: repeat(4, 4fr);
grid-gap: 0 5rem;
}
@media screen and (max-width: 1170px) {
.why-our-stickers-stand-out-main {
grid-template-columns: repeat(1, 1fr);
}
}
.why-our-stickers-stand-out-item {
text-align: center;
padding: 3rem 1.5rem;
justify-items: center;
}
@media screen and (max-width: 1170px) {
.why-our-stickers-stand-out-item:not(:first-child) {
margin-top: 0;
}
}
@media screen and (max-width: 1170px) {
.why-our-stickers-stand-out-item:first-child {
margin-top: 1rem;
}
}
.why-our-stickers-stand-out-img {
max-width: 21rem;
height: 8.7rem;
margin-top: 2.5rem;
}
@media screen and (max-width: 1170px) {
.why-our-stickers-stand-out-img {
margin-top: 0;
}
}
.why-our-stickers-stand-out-header {
font-weight: 700;
padding-top: 1rem;
line-height: 1.4;
}
.why-our-stickers-stand-out-p {
margin-top: 1rem;
}
.where-to-apply-our-maxistickers {
max-width: 124rem;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
}
.where-to-apply-our-maxistickers-header {
text-align: center;
padding-top: 7rem;
padding-bottom: 5rem;
}
@media screen and (max-width: 1170px) {
.where-to-apply-our-maxistickers-header {
padding-top: 6rem;
}
}
.where-to-apply-our-maxistickers-main {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 5.5rem;
max-width: 1080px;
margin: 0 auto;
padding-bottom: 10rem;
}
@media screen and (max-width: 1170px) {
.where-to-apply-our-maxistickers-main {
grid-template-columns: repeat(2, 1fr);
grid-gap: 4rem 0;
padding-bottom: 5rem;
}
}
.where-to-apply-our-maxistickers-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.where-to-apply-our-maxistickers-h2 {
font-size: 3.2rem;
text-transform: uppercase;
font-weight: 900;
}
@media screen and (max-width: 1170px) {
.where-to-apply-our-maxistickers-h2 {
font-size: 2.2rem;
line-height: 1.3;
}
}
.story-image {
grid-column: 2;
justify-self: end;
}
@media screen and (max-width: 1170px) {
.story-image {
order: -1;
top: 1rem;
position: relative;
}
}
@media screen and (max-width: 1170px) {
.story-text {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
@media screen and (max-width: 1170px) {
.young-artist-image img {
max-width: 100%;
object-fit: cover;
}
}
@media screen and (max-width: 1170px) {
.img-story {
max-width: 100%;
object-fit: cover;
}
}
@media screen and (max-width: 1170px) {
.where-to-apply-our-maxistickers-content img {
width: 100%;
max-width: 17rem;
}
}
.where-to-apply-our-maxistickers-content span {
display: block;
margin-top: 0.5rem;
}
.where-to-apply-our-maxistickers-note {
text-align: center;
margin-top: -4rem;
margin-bottom: 3rem;
padding-inline: 2.2rem;
font-style: italic;
}
@media screen and (min-width: 1171px) {
.why-our-stickers-stand-out-header.h1 {
max-width: 17rem;
}
}
@media screen and (min-width: 1171px) {
.why-our-stickers-stand-out-header.h2 {
max-width: 10rem;
}
}
@media screen and (min-width: 1171px) {
.why-our-stickers-stand-out-header.h3 {
max-width: 13.8rem;
}
}
@media screen and (min-width: 1171px) {
.why-our-stickers-stand-out-header.h4 {
max-width: 12rem;
}
}
.teddy-bear-container {
position: relative;
display: flex;
}
@media screen and (min-width: 1171px) {
.teddy-bear {
position: absolute;
right: 5%;
transform: translateY(-240%);
width: auto;
max-width: 450px;
}
}
@media screen and (min-width: 1270px) {
.teddy-bear {
right: 5%;
transform: translateY(-250%);
}
}
@media screen and (min-width: 1350px) {
.teddy-bear {
right: 10%;
transform: translateY(-250%);
}
}
@media screen and (min-width: 1520px) {
.teddy-bear {
right: 14%;
transform: translateY(-250%);
}
}
@media screen and (min-width: 1700px) {
.teddy-bear {
right: 18%;
transform: translateY(-250%);
}
}
@media screen and (max-width: 1170px) {
.teddy-bear-container {
display: none;
}
}