.kind{ display: flex; flex-direction: column; margin: 20px 0; height: 350px; padding: 30px; background: linear-gradient(135deg, #848484, #E4E4E4); border-radius: 35px; } .kind .title-h3{ text-align: center; font-size: 36px; font-weight: bold; color: #fff; } .kind .image-container{ display: flex; justify-content: center; } .button-more{ padding: 10px; margin: 10px; color: #fff; font-weight: bold; font-size: 32px; background-color: #727272; border: none; border-radius: 30px; } .title-h2{ font-size: 48px; font-weight: 800; } .category{ margin: 20px 0; height: 200px; padding: 30px; background: linear-gradient(135deg, #848484, #E4E4E4); border-radius: 35px; position: relative; } .category .title-h3{ font-size: 32px; font-weight: bold; color: #fff; } .category .image-container{ position: absolute; bottom: 0; right: 0; display: flex; justify-content: center; } .category .nature-img{ top: 0; } .title-h4{ font-size: 32px; font-weight: bold; } .genres{ font-size: 21px; font-weight: bold; } .genres li{ margin: 10px 0 0 0; } @media (max-width: 1200px) { } @media (max-width: 992px) { } @media (max-width: 768px) { .title-h2{ font-size: 24px; } .category .title-h3{ font-size: 24px; } .button-more{ padding: 4px; font-size: 20px; } } @media (max-width: 576px) { } @media (max-width: 398px) { .kind .title-h3{ font-size: 24px; } .genres{ display: flex; flex-direction: column; } }