:root{--white: #fff;--cream: #E7E5D6;--pink: #9C546B;--orange: #E3A27B;--blue: #3A6AA0;--black: #2B2926;--yellow: #E2AE4E;--green: #5C654A;--maroon: #953E3E;--gray-blue: #3E4763;--bronze: #A16543;--sand: #C69A5D;--true-black: #000;--image-dark-overlay: rgba(67, 81, 71, .25);--photo-shadow: 0 8px 13px 4px rgba(0, 0, 0, 0.25);--button-scale: 1.2;--transition-time: .5s;--transition-property: transform}.color--white{color:var(--white)}.color--cream{color:var(--cream)}.color--pink{color:var(--pink)}.color--orange{color:var(--orange)}.color--blue{color:var(--blue)}.color--black{color:var(--black)}.color--yellow{color:var(--yellow)}.color--maroon{color:var(--maroon)}.color--gray-blue{color:var(--gray-blue)}.cocktails{position:relative}.cocktails__container{padding-block:6rem;max-width:1300px;display:grid;gap:4.8rem 2rem}.cocktails .cocktail{position:relative;height:100%}.cocktails .cocktail__button{position:relative;background:transparent;outline:none;display:grid;justify-items:start;row-gap:3rem;padding:0 0 1rem;border:0;border-bottom:1px solid var(--true-black);cursor:pointer;color: var(--true-black)}.cocktails .cocktail__button:hover .cocktail__image{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}.cocktails .cocktail__image-container{width:100%;aspect-ratio:310/272;overflow:hidden}.cocktails .cocktail__image{-o-object-fit:cover;object-fit:cover;width:100%;height:100%;-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;-o-transition:transform .2s;transition:transform .2s;transition:transform .2s, -webkit-transform .2s}.cocktails .cocktail__title{text-transform:uppercase;letter-spacing:.05em;padding-right:4rem;margin:0;text-align:left;-ms-flex-item-align:end;align-self:end}.cocktails .cocktail__plus{position:absolute;width:2.1rem;height:2.1rem;right:0;bottom:1.5rem;display:grid;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;-o-transition:transform .2s;transition:transform .2s;transition:transform .2s, -webkit-transform .2s}.cocktails .cocktail__plus span{position:absolute;background-color:var(--black);width:2.1rem;height:3px}.cocktails .cocktail__plus span:last-child{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.cocktails .cocktail__content-wrapper{height:0;opacity:0;overflow:hidden;-webkit-transition:opacity .2s,height .4s;-o-transition:opacity .2s,height .4s;transition:opacity .2s,height .4s}.cocktails .cocktail__ingredients{display:grid;grid-template-columns:min(6.8rem,40%) 1fr;gap:0 1.1rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-block:1.8rem 1rem;border-bottom:1px solid var(--true-black)}.cocktails .cocktail__ingredient-quantity{text-transform:uppercase;line-height:1}.cocktails .cocktail__ingredient-name{margin:0;font-size:1.4rem}.cocktails .cocktail__description{line-height:1.43;padding:1.9rem 0 1.5rem;border-bottom:1px solid var(--true-black);margin:0}.cocktails .cocktail--opened .cocktail__content-wrapper{opacity:1}.cocktails .cocktail--opened .cocktail__plus{-webkit-transform:rotate(315deg);-ms-transform:rotate(315deg);transform:rotate(315deg)}@media(min-width: 768px){.cocktails__container{padding-block:7rem;grid-template-columns:repeat(2, 1fr)}.cocktails .cocktail:not(.cocktail--last) .cocktail__button{height:100%}.cocktails .cocktail:not(.cocktail--last) .cocktail__content-wrapper{position:absolute;z-index:2;background-image:url("../../assets/img/sand-background.jpg")}}@media(min-width: 992px){.cocktails__container{grid-template-columns:repeat(3, 1fr)}}@media(min-width: 1200px){.cocktails__container{padding-block:8rem;grid-template-columns:repeat(4, 1fr)}}