.article{display:flex;flex-direction:column;justify-content:flex-end;margin:16px 16px 32px 0;flex:1 1;height:300px;transition:box-shadow .2s,filter .2s;cursor:pointer;transition:all .3s;position:relative;border:5px solid #b8a081}.article .articleImage{width:100%;height:100%;object-fit:cover;position:absolute}.article .backgroundGradient{position:absolute;bottom:0;right:0;left:0;height:30vh;background:linear-gradient(180deg,transparent 10%,hsla(0,0%,9%,.2) 30%,hsla(0,0%,9%,.83) 78%);z-index:1}.article:hover{box-shadow:2px 2px 14px 2px rgba(0,0,0,.5);cursor:pointer}.article .date{padding:5px 10px 8px;background-color:#b8a081;color:#f0f0f0;position:absolute;left:0;top:0;font-weight:600;font-family:Alexer,sans-serif;font-size:1.2em;letter-spacing:1px}.article .articleWrapper{display:flex;justify-content:space-between;align-items:flex-start;flex-direction:column;z-index:2}.article .articleWrapper .title{margin:0;font-family:Alexer,sans-serif;font-size:1.5em;color:#f0f0f0;flex:1 1;line-height:1.2;letter-spacing:1px;font-weight:400}@media(min-width:768px){.article{height:400px}}.articleWrapper{display:flex;justify-content:space-between;align-items:flex-start;flex-direction:column;z-index:2;padding:0 16px;transform:translatey(30px)}.articleContent{display:flex;justify-content:flex-end;align-items:center;flex-direction:row;margin:0 16px;width:95%}.articleContent .articleButtons{display:flex;align-items:center;margin:0 0 0 40px}.articleContent .articleButtons a button{margin:8px}.articleContent .articleButtons .articleButton--white{background-color:#f0f0f0}.articleContent .articleButtons .articleButton--white:hover{background-color:#b8a081}.articleNameWrapper .articleButton{z-index:2;margin:8px}.articleNameWrapper .articleButton .button+.button{margin:32px 0 16px}.articleContentWrapper{height:inherit;overflow:hidden}