.packs {
margin: 40px 0;
}
.packs__boxes {
display: flex;
flex-direction: column;
margin-top: 32px;
gap: 20px;
}
.packs__box {
padding: 32px 28px;
border-radius: 6px;
background: #F2F2F2;
}
.packs__box__heading {
color: #171717;
font-family: "Cal Sans";
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.packs__box__text {
color: #171717;
font-family: Poppins;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-top: 24px;
}
.packs__box__price {
color: #171717;
font-family: "Cal Sans";
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-top: 32px;
}
.packs__box__price span {
color: #FF0000;
display: block;
}
.packs__box--5 {
background-color: #FF0000;
color: #ffffff;
}
.packs__box--5 .packs__box__heading {
color: #ffffff;
}
.packs__box--5 .packs__box__text {
color: #ffffff;
}
.packs__box--5 .packs__box__price {
color: #ffffff;
}
.packs__box--5 .packs__box__price span {
color: #ffffff;
}
.packs__box--last {
padding: 0;
background-color: transparent;
}
.packs .button {
width: fit-content;
margin-left: auto;
margin-right: auto;
margin-top: 24px;
}
@media (min-width: 900px) {
.packs {
margin: 80px 0;
}
.packs__boxes {
margin-top: 80px;
margin-bottom: 60px;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.packs__box {
padding: 30px;
display: flex;
flex-direction: column;
height: auto;
}
.packs__box__price {
margin-top: auto;
}
.packs__box__text {
padding-bottom: 20px;
}
.packs__box--5 {
align-items: center;
justify-content: center;
}
.packs__box--5 .packs__box__price {
color: rgba(255, 255, 255, 0.7);
}
.packs__box--5 .packs__box__price span {
color: #FFF;
font-family: "Cal Sans";
}
}
@media (min-width: 1200px) {
.packs {
margin: 100px 0;
}
.packs__boxes {
margin-top: 74px;
margin-bottom: 130px;
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1440px) {
.packs__box {
display: flex;
flex-direction: column;
}
.packs__box__heading {
font-size: 24px;
font-weight: 400;
}
.packs__box__text {
font-size: 16px;
margin-top: 35px;
margin-bottom: 35px;
padding-bottom: 0;
}
.packs__box__price {
margin-top: auto;
font-size: 24px;
}
.packs__box--last {
align-items: center;
justify-content: center;
}
.packs__box--last a {
margin-top: 0;
}
}