.event{ margin: 30px 0; position: relative; } .event .image-container{ display: block; border-radius: 50px; overflow: hidden; } .image-container img{ height: 300px; width: 100%; } .event .data-time{ padding: 20px; position: absolute; top: 30px; left: 50px; font-size: 32px; font-weight: bold; background-color: #D9D9D9; border-radius: 20px; } .event .add-info{ padding: 20px 60px; position: absolute; bottom: 30px; left: 50px; color: #fff; font-size: 32px; font-weight: bold; background-color: #242424; border-radius: 20px; } .bottom-nav{ padding: 0; } .bottom-nav .col{ margin: 15px 0; } .bottom-nav_item{ height: 100%; padding: 15px; font-size: 20px; font-weight: bold; color: #fff; text-align: center; background: linear-gradient(#707070, #A1A1A1); border-radius: 10px; } .title-h3{ font-size: 36px; font-weight: bold; } .translation-box{ margin: 30px 0; } .translation-box .image-container{ display: block; border-radius: 27px; overflow: hidden; } @media (max-width: 1200px) { .event .data-time{ font-size: 24px; } .event .add-info{ padding: 20px 40px; font-size: 24px; } } @media (max-width: 992px) { .event .data-time{ padding: 10px; font-size: 20px; } .event .add-info{ padding: 10px 20px; font-size: 20px; } } @media (max-width: 768px) { .event .data-time{ padding: 5px; font-size: 14px; } .event .add-info{ padding: 5px 10px; font-size: 14px; } .title-h3{ font-size: 28px; } .bottom-nav{ display: flex; flex-direction: column; } } @media (max-width: 576px) { .event .data-time{ padding: 3px; font-size: 12px; } .event .add-info{ padding: 3px 6px; font-size: 12px; } .title-h3{ font-size: 24px; } } @media (max-width: 398px) { .title-h3{ font-size: 20px; } }