.searchbar-container{display:flex;flex-direction:row;gap:8px}.searchbar-input{width:550px;height:50px;border:none;outline:none;border-radius:50px;padding:16px;font-size:16px;box-shadow:0 2px 4px rgba(0,0,0,.25)}.searchbar-button{width:50px;height:50px;border-radius:50%;color:#f5f5f5;background-color:#B08F62;border:none;font-size:25px}.articles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}.article-card{height:500px;width:400px;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;background-color:aquamarine;position:relative;transition:all .5s;box-shadow:0 2px 4px rgba(0,0,0,.25);text-decoration:none;&:visited{color:inherit}img{position:absolute;height:500px;width:400px;object-fit:cover;transition:all .5s}&:hover{transform:scale(1.03);box-shadow:0 2px 8px rgba(0,0,0,.25);cursor:pointer;img{transform:scale(1.05)}}}.article-info{display:flex;flex-direction:column;justify-content:flex-end;padding:8px;gap:8px;position:relative;z-index:1;&:before{content:"";position:absolute;bottom:0;left:0;mask:linear-gradient(transparent,black,black);background:linear-gradient(0deg,rgba(51,51,51,.8),transparent);backdrop-filter:blur(4px);height:350px;width:100%;z-index:0}h3,p{color:#f5f5f5;margin:0}p{line-height:26px;z-index:1}}.article-topic{width:max-content;padding:0 16px;background-color:#f5f5f5;color:#333333;border-radius:5px;z-index:1}@media (max-width:980px){.articles-grid{grid-template-columns:repeat(1,1fr)}.searchbar-container{width:90%}.searchbar-input{width:auto;flex-grow:1}}