html_css
1* {2box-sizing: border-box;3}
4
5body {6margin: 0;7padding: 0;8font-family: "Playfair Display", serif;9color: #8d8d8d;10}
11
12.container {13background-color: #fbe9e7;14min-height: 100vh;15padding: 20px;16display: flex;17justify-content: center;18align-items: center;19}
20
21.tags {22display: flex;23flex-wrap: wrap;24list-style: none;25padding: 0;26margin: 0;27gap: 5px;28font-family: "Raleway", sans-serif;29font-size: 15px;30}
31
32.tags__item {33border: 1px solid #57b25f;34color: #57b25f;35padding: 0.125em 0.75em;36border-radius: 2em;37}
38
39.button {40border: none;41background-color: hsl(14.12deg 100% 70%);42color: #fff;43font-family: "Raleway", serif;44text-transform: uppercase;45border-radius: 2em;46font-size: 13px;47padding: 1.3em 3em;48letter-spacing: 0.2em;49font-weight: 500;50transition: background-color 0.25s ease;51}
52.button:hover{53background-color: hsl(14.12deg 100% 65%);54}
55
56.card {57display: flex;58max-width: 750px;59background-color: white;60border-radius: 7px;61overflow: hidden;62box-shadow: 0 14px 32px 0 rgba(0, 0, 0, 0.15);63}
64.card__picture {65display: block;66flex-basis: 50%;67min-height: 420px;68overflow: hidden;69}
70
71.card__img {72display: block;73max-width: 100%;74height: 100%;75object-fit: cover;76}
77
78.card__content {79padding: 52px 38px;80display: flex;81flex-direction: column;82gap: 25px;83flex: 1;84
85}
86
87.card__title {88font-family: "Bentham";89color: #474747;90font-size: 34px;91margin: 0;92gap: 5px;93}
94
95.card__text {96margin: 0 0 15px;97
98}
99.card__tags {100margin-top: auto;101}
102
103.card__bottom {104display: flex;105align-items: center;106gap: 30px;107}
108
109.card__price {110color: #474747;111font-family: "Suranna", serif;112font-size: 34px;113font-weight: bold;114line-height: 1.3;115}
116
117
118.card__button {119flex: 1 1 auto;120}
121
122@media only screen and (max-width: 768px) {123.card {124flex-direction: column;125}126.card__picture {127flex-basis: 300px;128min-height: auto;129}130
131.card__content {132padding: 45px 38px;133}134}
135
136@media only screen and (max-width: 430px){137.card__content {138padding: 40px 30px;139}140
141.card__bottom {142flex-direction: column;143gap: 15px;144align-items: stretch;145text-align: center;146}147}
148