.offer {
margin: 40px 0;
}
.offer__sets {
display: flex;
flex-direction: column;
}
.offer__set {
margin-bottom: 20px;
padding-bottom: 20px;
}
.offer__set:not(.offer__set:last-of-type) {
border-bottom: 1px solid #e5e5e5;
}
.offer__set__heading {
color: #171717;
font-family: "Cal Sans";
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-bottom: 32px;
margin-bottom: 24px;
}
.offer__set__heading span {
display: block;
color: #FF0000;
font-family: "Cal Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.offer__content {
margin-top: 24px;
}
.offer__content > p {
color: #171717;
font-family: Poppins;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
display: block;
}
.offer__content details {
appearance: none;
background-image: none;
}
.offer__content details summary {
list-style: none;
appearance: none;
cursor: pointer;
background-image: none;
}
.offer__content details summary::-webkit-details-marker {
display: none;
}
.offer__content details {
appearance: none;
margin-top: 20px;
}
.offer__content details summary {
color: #FF0000;
font-family: "Cal Sans";
font-size: 16px;
appearance: none;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.offer__content details .content {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 20px;
}
.offer__content details .content img {
width: 100%;
height: auto;
}
.offer__content details .open {
display: block;
}
.offer__content details .closed {
display: none;
}
.offer__content details[open] .open {
display: none;
}
.offer__content details[open] .closed {
display: block;
}
.offer__floating {
padding: 40px;
border-radius: 6px 100px 6px 6px;
background: #F6F6F6;
display: flex;
flex-direction: column;
align-items: center3;
}
.offer__floating svg {
display: none;
}
.offer__floating img {
width: 200px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
.offer__floating__text {
color: #171717;
font-family: "Cal Sans";
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-align: center;
display: block;
}
.offer__floating__text span:first-of-type {
color: #ff0000;
text-align: center;
font-family: "Cal Sans";
font-size: 64px;
font-style: normal;
font-weight: 400;
line-height: 70px;
display: block;
margin-bottom: 24px;
margin-top: 24px;
}
.offer__floating__text span:nth-of-type(2),
.offer__floating__text span:nth-of-type(3),
.offer__floating__text span:nth-of-type(4) {
color: #171717;
font-family: "Cal Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 30px;
display: block;
margin: 24px 0;
}
.offer__floating__text span:nth-of-type(2) b,
.offer__floating__text span:nth-of-type(3) b,
.offer__floating__text span:nth-of-type(4) b {
color: #F00;
text-align: center;
font-family: "Cal Sans";
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: 30px;
display: block;
}
@media (min-width: 900px) {
.offer {
margin: 80px 0;
}
.offer__content details .content {
grid-template-columns: repeat(3, 1fr);
}
.offer__container {
display: grid;
grid-template-columns: 1fr 300px;
gap: 24px;
}
.offer__floating {
height: fit-content;
position: sticky;
top: 20px;
}
.offer__floating__text {
font-size: 15px;
}
}
@media (min-width: 1200px) {
.offer {
margin: 100px 0;
}
.offer__content details .content {
grid-template-columns: repeat(6, 1fr);
}
}
@media (min-width: 1440px) {
.offer {
margin: 100px 0;
}
.offer__container {
display: grid;
grid-template-columns: 1fr 345px;
gap: 26px;
}
.offer__floating {
padding: 80px 50px 94px;
}
.offer__floating .button {
margin-top: 24px;
}
.offer__floating__text {
font-size: 24px;
margin-top: 43px;
}
.offer__floating__text span {
font-size: 64px;
margin-top: 24px;
}
.offer__floating svg {
display: block;
margin-top: 80px;
width: 100%;
}
.offer__set {
display: grid;
grid-template-columns: 330px 1fr;
margin-bottom: 40px;
padding-bottom: 40px;
}
.offer__set:last-of-type {
padding-bottom: 0;
margin-bottom: 0;
}
.offer__set__heading {
font-size: 32px;
}
.offer__set__heading span {
font-size: 16px;
}
.offer__content {
margin-top: 0;
padding-right: 127px;
}
.offer__content > p {
font-size: 16px;
}
.offer__content details .content {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
}