-
Notifications
You must be signed in to change notification settings - Fork 0
/
Carousel.css
1 lines (1 loc) · 5.45 KB
/
Carousel.css
1
.carousel--bg-grey{background-color:#f8f9fa}.carousel .carousel-container{display:grid;margin:auto}@media(max-width: 599px){.carousel .carousel-container{-moz-column-gap:24px;column-gap:24px}}@media(min-width: 600px)and (max-width: 1080px){.carousel .carousel-container{-moz-column-gap:24px;column-gap:24px}}@media(min-width: 1081px)and (max-width: 1439px){.carousel .carousel-container{-moz-column-gap:24px;column-gap:24px}}@media(min-width: 1440px){.carousel .carousel-container{-moz-column-gap:24px;column-gap:24px}}@media(max-width: 599px){.carousel .carousel-container{grid-template-columns:repeat(4, 1fr);padding:0 16px}}@media(min-width: 600px)and (max-width: 1080px){.carousel .carousel-container{grid-template-columns:repeat(12, 1fr);padding:0 24px;max-width:1080px;margin:0 auto}}@media(min-width: 1081px)and (max-width: 1439px){.carousel .carousel-container{grid-template-columns:repeat(12, 1fr);padding:0 24px}}@media(min-width: 1440px){.carousel .carousel-container{grid-template-columns:repeat(12, 1fr);margin:0 auto;max-width:1392px}}@media(min-width: 1081px){.carousel .carousel-container{width:998px}}.carousel .glue-carousel__image{border-radius:16px}@media(min-width: 1081px){.carousel .glue-carousel__image{height:479px;width:854px}}.carousel .glue-carousel__image degu-image{height:100%}@media(max-width: 1080px){.carousel .glue-carousel__image degu-image{width:100%}}@media(max-width: 599px){.carousel .glue-carousel__image degu-image{height:auto}}.carousel .glue-carousel__image img{border-radius:16px;height:100%}@media(max-width: 1080px){.carousel .glue-carousel__image img{width:100%}}@media(max-width: 599px){.carousel .glue-carousel__image img{height:auto}}.carousel__caption{position:relative}@media(min-width: 1081px){.carousel__caption{padding:36px}}.carousel__caption--content{grid-column-gap:62px;padding:32px 8px}@media(max-width: 1080px){.carousel__caption--content{grid-column-gap:0}}@media(max-width: 1080px){.carousel__caption--content .glue-grid__col{grid-column-end:span 12}}@media(max-width: 1080px){.carousel__caption--content .button-link{justify-content:space-between;max-width:100%;width:100%}}.carousel__caption--description{max-width:678px}.carousel__caption--eyebrow{--annotation: Eyebrow;font-size:14px;letter-spacing:.5px;line-height:20px;font-weight:700;--annotation: Body Medium;font-family:"Google Sans",Arial,Helvetica,sans-serif;font-size:18px;letter-spacing:0;line-height:28px;color:#5f6368;font-weight:500}@media(max-width: 599px){.carousel__caption--eyebrow{font-size:16px;letter-spacing:0;line-height:26px}}.carousel__caption--title{font-size:20px;letter-spacing:0;line-height:28px;font-size:24px;padding:8px 0}@media(max-width: 599px){.carousel__caption--title{font-size:18px}}.carousel__caption--body{--annotation: Body Medium;font-family:"Google Sans",Arial,Helvetica,sans-serif;font-size:18px;letter-spacing:0;line-height:28px;color:#5f6368}@media(max-width: 599px){.carousel__caption--body{font-size:16px;letter-spacing:0;line-height:26px}}.carousel__caption--qr{text-align:right}.carousel__caption--qr img{max-width:130px}.carousel__caption--button{border-top:1px solid #bdc1c6;padding-top:20px}@media(max-width: 1080px){.carousel__caption--button{width:100%}}.glue-carousel{grid-column-start:1;grid-column-end:span 12}.glue-carousel.glue-carousel--peek-out .glue-carousel__viewport{background:#ededed;border-radius:16px;overflow:hidden}.glue-carousel__item{padding:36px 36px 0}.glue-carousel__item:not(.glue-card) img{width:inherit}.glue-carousel__image img{width:100%}.glue-carousel__video video{width:100%}.glue-carousel__navigation-thumbnails{width:50%;margin-left:auto;margin-right:auto;display:flex;justify-content:center;padding:16px 0}.glue-carousel__navigation-thumbnails .glue-carousel__navigation-thumbnail{margin:0 4px}.glue-carousel__navigation-thumbnails .glue-carousel__navigation-thumbnail button{padding:0}.glue-carousel__navigation-thumbnails .glue-carousel__navigation-thumbnail img{width:64px}.glue-carousel .glue-carousel__dot:before{border:none;background:#dadce0}.glue-carousel .glue-carousel__dot.glue-is-active:before{background:#1a73e8}.glue-carousel .glue-carousel__button{background:rgba(0,0,0,0);border-radius:100px;padding:6px 19px;position:relative;overflow:hidden;transition:all .4s ease-in-out;position:absolute}.glue-carousel .glue-carousel__button:after{content:"";background-color:#e8eaed;border-radius:100px;position:absolute;transition:all .5s ease-in-out;width:100%;height:100%;left:0;top:0;z-index:-1;transform:translateX(-100%)}.glue-carousel .glue-carousel__button:focus{background-color:rgba(0,0,0,0);border-radius:100px}.glue-carousel .glue-carousel__button:hover,.glue-carousel .glue-carousel__button.active{background-color:rgba(0,0,0,0);border-radius:100px;box-shadow:none;overflow:hidden}.glue-carousel .glue-carousel__button:hover:after,.glue-carousel .glue-carousel__button.active:after{transform:translateX(0%)}.glue-carousel .glue-carousel__button--prev{inset-inline-start:-80px}.glue-carousel .glue-carousel__button--next{inset-inline-end:-80px}.glue-carousel .glue-button--medium-emphasis.button-link{--annotation: Body Medium;font-family:"Google Sans",Arial,Helvetica,sans-serif;font-size:18px;letter-spacing:0;line-height:28px;background:rgba(0,0,0,0);border:0;border-radius:99px;color:#1a73e8;margin:0 auto;padding:0;width:100%}@media(max-width: 599px){.glue-carousel .glue-button--medium-emphasis.button-link{font-size:16px;letter-spacing:0;line-height:26px}}@media(max-width: 1080px){.glue-carousel .glue-button--medium-emphasis.button-link{max-width:100%}}