section#featured-promotion {
border-radius: 2rem;
background: #f5f8fc;
border: 1px solid #e1e8f2;
max-width: 1100px;
margin: 1rem auto 0.5rem auto;
position: relative;
font-size: 0.9rem;
}
section#featured-promotion article {
padding: 4.5rem calc(500px + 1rem) 2.5rem 2.5rem;
position: relative;
}
section#featured-promotion ul {
list-style: none;
font-weight: bold;
font-size: 0.9rem;
}
section#featured-promotion li {
display: inline-block;
margin-right: 1rem;
}
section#featured-promotion ul li:last-of-type a {
font-weight: normal;
}
section#featured-promotion h3 {
padding-bottom: 0.5rem;
}
section#featured-promotion h3 a {
text-decoration: none;
color: #13254c;
font-weight: bolder;
font-size: 2rem;
display: inline-block;
}
section#featured-promotion h3 + p {
position: absolute;
top: 2.5rem;
font-size: 0.9rem;
}
section#featured-promotion h3 + p strong {
text-transform: uppercase;
color: #305899;
font-weight: bold;
}
section#featured-promotion h3 + p span {
font-style: oblique;
color: #5f7391;
}
section#featured-promotion p.thumbnail {
position: absolute;
right: 2.5rem;
top: 2.5rem;
max-width: 450px;
padding: 0;
}
section#featured-promotion p.thumbnail,
section#featured-promotion p.thumbnail img {
border-radius: 1.5rem;
max-height: 220px;
}
section#featured-promotion p.thumbnail + p {
line-height: 1.8;
}
section#featured-promotion a.button {
border-color: #0a8711;
color: #0a8711;
font-weight: bold;
font-size: 0.9rem;
}
@media (max-width: 840px) {
section#featured-promotion article {
padding: calc(200px + 1rem) 1rem 0 1rem;
}
section#featured-promotion h3 + p {
position: static;
}
section#featured-promotion p.thumbnail {
top: 1rem;
left: 1rem;
display: block;
overflow: hidden;
width: 100%;
}
section#featured-promotion p.thumbnail img {
width: calc(100% - 2rem);
}
section#featured-promotion h3 a {
font-size: 1.5rem;
}
section#featured-promotion h3 + p {
font-size: 0.8rem;
}
section#featured-promotion ul {
text-align: center;
}
section#featured-promotion li {
display: block;
margin: 0 0 0.5rem 0;
}
section#featured-promotion ul a {
display: block;
max-width: 200px;
margin: 0 auto;
}