.ask-wrapper {
position: relative;
width: 100%;
box-sizing: border-box;
margin: 0 auto;
overflow: hidden;
}
.ask-wrapper * {
box-sizing: border-box;
}
.ask-wrapper.ask-grid-mode .ask-track {
display: grid;
width: 100%;
}
.ask-wrapper.ask-grid-mode .ask-track.ask-center-last-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.ask-wrapper.ask-carousel-mode .ask-track {
display: flex;
transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
will-change: transform;
}
.ask-wrapper.ask-carousel-mode .ask-item {
flex-shrink: 0;
}
.ask-card {
background: #FFF8D2;
border-radius: 20px;
padding: 20px;
height: 100%;
display: flex;
flex-direction: column;
}
.ask-label {
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 8px;
display: inline-block;
}
.ask-image-wrap {
margin-bottom: 15px;
width: 100%;
}
.ask-image-wrap img {
max-width: 100%;
height: auto;
display: block;
border-radius: 4px;
}
.ask-heading {
margin: 0 0 10px 0;
font-size: 1.25rem;
}
.ask-description {
font-size: 0.95rem;
margin-bottom: 15px;
flex-grow: 1;
}
.ask-button {
display: inline-block;
padding: 10px 20px;
background-color: #241705;
color: #FFF8D2;
text-decoration: none;
border-radius: 4px;
text-align: center;
align-self: flex-start;
}
.ask-button:hover,
.ask-button:focus {
background-color: #241705;
color: #FFF8D2;
}
.ask-nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0,0,0,0.6);
color: #fff;
border: none;
width: 40px;
height: 40px;
cursor: pointer;
z-index: 10;
border-radius: 50%;
font-size: 20px;
line-height: 40px;
text-align: center;
}
.ask-nav-btn.ask-prev { left: 10px; }
.ask-nav-btn.ask-next { right: 10px; }
.ask-dots-container,
.ask-grid-pagination {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 20px;
}
.ask-dot,
.ask-page-btn {
border: none;
background: #ccc;
cursor: pointer;
}
.ask-dot {
width: 10px;
height: 10px;
border-radius: 50%;
}
.ask-dot.ask-active {
background: #0073aa;
}
.ask-page-btn {
padding: 6px 12px;
border-radius: 4px;
}
.ask-page-btn.ask-active {
background: #0073aa;
color: #fff;
}