diff --git a/assets/sass/cards.scss b/assets/sass/cards.scss index 05186d2..31afa81 100644 --- a/assets/sass/cards.scss +++ b/assets/sass/cards.scss @@ -13,65 +13,30 @@ } } +.small-circle { + border-radius: 50%; + width: 250px; + height: 250px; +} + article { - display: flex; background-color: $dark; border-radius: 10px; -} - -article.card { height: 420px; flex: 1 1 305px; - flex-direction: column; overflow: hidden; - div.article-info-container, div.article-image { - overflow: hidden; - flex: 1; - } - - div.article-info { - box-sizing: border-box; - padding: 25px; - height: 200px; - display: flex; - flex-direction: column; - - a.article-title { - flex: 2; - display: flex; - justify-content: space-between; - flex-direction: column; - text-decoration: none; - color: $font-color; - } + img { + height: 50%; + width: 100%; + object-fit: cover; } -} - -.circle { - border-radius: 50%; -} - -.article-link { - text-decoration: none; - color: $font-color; -} - -article.card-alternate { - justify-content: space-evenly; - align-items: center; - flex-wrap: wrap; - gap: 40px; div { - padding: 16px; - } - img { - width: 250px; - height: 250px; - border-radius: 50%; - } - p { - max-width: 500px; + margin: auto 16px; + display: flex; + flex-direction: column; + justify-content: space-between; } + }