.hp-news-container{margin-top:20px;gap:30px;position:relative}
#hero img{width: 100%;}
#hero figcaption{margin-top:10px;font-size: 1.5em;text-align: center;font-weight: 500;}
.highlights{font-size: 1.125rem;}
.highlights,.whats-new{gap:20px;flex-wrap:wrap;line-height:1.3;width: 100%;}
.whats-new figure{display:flex;flex-direction:row-reverse;gap:10px;align-items:flex-start}
.whats-new figcaption{margin-top:-3px}
.hp-content-middle,.hp-content-middle .middle .flex{gap:20px}
.hp-content-middle .middle h3{padding-bottom:10px;margin-bottom:1rem;border-bottom:1px solid currentColor}
.hp-content-middle .ads .ad:first-child{margin-top:20px}
@media only screen and (max-width: 480px) {
.hp-content-middle .middle .flex{flex-direction:column}
}
@media only screen and (min-width: 481px) {
.hp-content-middle .middle .flex{flex-wrap:wrap}
.hp-content-middle .middle .flex a{flex:1 1 48%}
}
@media only screen and (min-width: 560px) {
.highlights{flex-wrap:nowrap}
.highlights a{flex:1 1 31%}
.whats-new a{flex:1 1 48%}
.whats-new figure{flex-direction:column}
}
@media only screen and (max-width: 767px) {
#hero{display:block}
.hp-news-container{flex-direction:column}
}
@media only screen and (min-width: 768px) {
.whats-new a{flex:0 1 calc((100% - 40px) / 3)}
.hp-content-middle .middle .flex a{flex:0 1 calc((100% - 40px) / 3)}
.hp-content-middle .ads{gap:20px;flex-wrap:wrap}
.hp-content-middle .ad{flex:1 1 48%}
.tab-wrapper{flex-basis:calc(100% - 320px)}
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
.hp-news-container{flex-wrap:wrap;justify-content:center}
#hero{flex-basis:100%}
}
@media only screen and (max-width: 1023px) {
.hp-content-middle{flex-direction:column}
}
@media only screen and (min-width: 1024px) {
#hero{flex:1 1 auto}
.hp-news-container{align-items:flex-start;margin-bottom:30px}
.highlights{order:-1}
.highlights,.whats-new{flex:0 0 22%;max-width:400px;flex-direction:column}
.hp-content-middle{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
.hp-content-middle .middle{gap:20px;flex:1 0 calc(100% - 220px);flex-wrap:wrap}
/*.hp-content-middle .middle .flex a{flex:1 1 calc(50% - 10px)}
.hp-content-middle .leftcol{order:-1;width:200px}*/
.hp-content-middle .block{flex:1 1 48%}
.hp-content-middle .block+.block{margin-top: 20px;}
.hp-content-middle .block h3{margin-top:0}
}
@media only screen and (min-width: 768px) and (max-width: 1279px) {
.whats-new figure{display:block}
.whats-new figcaption{margin-top:10px}
}
@media only screen and (min-width: 1024px) and (max-width: 1279px) {
#hero{flex:0 1 50%}
.whats-new{width:22%;position:absolute;right:0;max-height:100%;overflow-y:auto;flex-direction:column;flex-wrap:nowrap}
}
@media only screen and (min-width: 1280px) {
.hp-content-middle{flex-wrap:nowrap}
.hp-content-middle .middle{flex:1 1 calc(100% - 320px)}
/*.hp-content-middle .rightcol{width:300px}*/
.whats-new figure{flex-direction:row-reverse}
/*.hp-content-middle .leftcol{flex:1 0 200px}*/
.tab-wrapper{flex-basis:100%}
}
@media only screen and (min-width: 1400px) {
.hp-news-container{gap:40px;margin-bottom:40px}
.highlights,.whats-new{gap:30px}
.hp-content-middle,.hp-content-middle .middle{gap:40px}
.hp-content-middle .middle{flex:1 1 calc(100% - 340px)}
.hp-content-middle .block{flex-basis:47%}
}