.card { cursor: pointer; width: 460px; background: #1C1D21; border-radius: 4px 0px 0px 4px; } .card-image { border-radius: 4px; object-fit: cover; width: 100%; height: 364px; min-height: 260px; min-width: 300px; } .card-body { box-sizing: border-box; padding: 20px 24px 32px; } .card-header { display: flex; flex-direction: row; gap: 24px; margin-bottom: 20px; } .card-icon { width: 40px; height: 40px; } .caption-name { margin: 0; font-style: normal; font-weight: 400; font-size: 24px; line-height: 125%; margin-bottom: 2px; } .card-location { margin: 0; font-style: normal; font-weight: 400; font-size: 12px; line-height: 130%; color: #73788C; } .card-description-block { display: flex; flex-direction: column; gap: 8px; } .card-description { font-style: normal; font-weight: 400; font-size: 20px; margin: 0; line-height: 140%; } .card-description-second { font-style: normal; font-weight: 400; font-size: 16px; line-height: 140%; /* or 22px */ margin: 0; /* Graff/Gray/5 */ color: #73788C; } @media screen and (max-width: 1440px) { .card { width: 384px; } .card-image { height: 300px; } .card-header { gap: 16px; } .card-body { padding: 20px 20px 24px; } .card-description { font-size: 16px; } .card-description-second { font-size: 14px; } } @media screen and (max-width: 1152px) { .card { width: 300px; } .card-header { gap: 12px; } .card-image { height: 260px; } .card-body { padding: 20px 12px 16px; } .caption-name {} .card-description { font-size: 14px; } .card-description-second { font-size: 12px; } } @media screen and (max-width: 920px) { .card { width: auto; } .card-image { height: auto; } .card-header { gap: 16px; } .card-body { padding: 20px 20px 24px; } .card-description { font-size: 16px; } .card-description-second { font-size: 14px; } } @media screen and (max-width: 640px) { .card { width: 100%; } .card-header { gap: 12px; } .card-image { height: auto; } .card-body { padding: 20px 12px 16px; } .card-description { font-size: 14px; } .card-description-second { font-size: 12px; } }