.hero {
margin: 20px auto 40px;
}
.hero__header {
margin-bottom: 32px;
padding-bottom: 32px;
border-bottom: 1px solid #E6D8D8;
}
.hero__text {
margin-left: auto;
max-width: 550px;
text-align: right;
display: block;
}
.hero .button {
width: fit-content;
margin-top: 32px;
margin-left: auto;
}
.hero__image {
display: block;
position: relative;
width: fit-content;
margin-right: auto;
}
.hero__image::after {
content: "";
position: absolute;
bottom: 0;
left: 10.5%;
display: block;
background-color: #FF0000;
border-radius: 6px;
aspect-ratio: 579/695;
height: auto;
width: 93%;
z-index: -1;
}
.hero__image::before {
content: "";
position: absolute;
bottom: 0;
left: 10.5%;
z-index: -1;
border-radius: 6px;
background: #F5F5F5;
width: 15.37%;
aspect-ratio: 1/1;
height: auto;
transform: translate(530%, -650%);
}
.hero__image img {
width: 300px;
display: block;
max-width: 100%;
}
.hero__image--inside {
display: none;
}
.hero__image--outside {
display: none;
}
.hero__tags {
margin-top: 32px;
}
.hero__tags__content {
display: grid;
gap: 20px 40px;
align-items: center;
grid-template-columns: auto;
grid-template-rows: auto auto;
}
.hero__tags__text {
grid-row: 1/4;
grid-column: 1/2;
}
.hero__tags__image {
margin-top: 24px;
margin-left: auto;
margin-right: auto;
}
.hero__tags__image img {
width: 100%;
aspect-ratio: 345/242;
display: block;
margin-left: auto;
filter: grayscale(1);
}
.hero__tag {
color: #171717;
grid-column: 1/2;
font-family: "Cal Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 20px;
margin-bottom: 14px;
}
@media (min-width: 400px) {
.hero__tags__content {
grid-template-columns: auto 1fr;
grid-template-rows: unset;
}
.hero__tags__text {
grid-column: 2/3;
}
}
@media (min-width: 700px) {
.hero__content {
max-width: 714px;
}
.hero__tags {
display: grid;
grid-template-columns: 1fr 345px;
justify-content: space-between;
}
.hero__tags__content {
gap: 0;
max-width: 260px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.hero__tags__text {
color: #7A7A7A;
font-family: Poppins;
font-size: 14px;
font-style: normal;
margin-top: auto;
font-weight: 400;
line-height: normal;
}
.hero__tags__image {
margin-top: 0;
}
.hero__tag {
margin-bottom: 28px;
}
}
@media (min-width: 900px) {
.hero {
margin: 20px 0 80px;
}
.hero__content {
max-width: 450px;
}
.hero__tags {
position: relative;
grid-template-columns: 345px 1fr;
gap: 110px;
width: 150%;
}
.hero__tags__image {
grid-column: 1/2;
grid-row: 1/2;
}
.hero__tags__content {
grid-column: 2/3;
grid-row: 1/2;
}
.hero__image {
height: fit-content;
margin-left: auto;
width: 283px;
margin-left: auto;
margin-right: 0;
transform: translate(-3.5%);
}
.hero__image--outside {
display: block;
}
.hero__container {
display: grid;
grid-template-columns: 450px 1fr;
}
}
@media (min-width: 1000px) {
.hero__container {
display: grid;
grid-template-columns: 660px 1fr;
}
.hero__content {
max-width: 650px;
}
.hero__tags {
position: relative;
gap: 0px;
grid-template-columns: 1fr 345px;
width: 100%;
}
.hero__tags__image {
grid-column: 2/3;
grid-row: 1/2;
}
.hero__tags__content {
grid-column: 1/2;
grid-row: 1/2;
}
.hero__image {
margin-top: auto;
width: 428px;
}
.hero__image img {
width: 100%;
}
}
@media (min-width: 1100px) {
.hero {
margin-top: -50px;
}
.hero__container {
display: grid;
grid-template-columns: 712px 1fr;
}
.hero__header {
margin-top: 100px;
}
.hero__image {
width: 550px;
}
}
@media (min-width: 1200px) {
.hero {
margin-top: -50px;
margin-bottom: 100px;
}
.hero__container {
display: grid;
grid-template-columns: 712px 1fr;
}
.hero__header {
margin-top: 100px;
}
.hero__image {
width: 550px;
}
}
@media (min-width: 1440px) {
.hero {
margin-top: -80px;
}
.hero__content {
max-width: 712px;
}
.hero__container {
gap: 73px;
}
.hero__image {
width: 618px;
}
.hero__header {
margin-top: 148px;
padding-bottom: 43px;
margin-bottom: 50px;
}
}