/* toast */

.toast.card {
	position: fixed;
	bottom: 0;
	left: 50%;
    transform: translate(-50%, 200%);
	z-index: 9999999;
	grid-template-columns: 1fr .4fr;
	border-radius: 1.5rem 1.5rem 0 0 !important;
	opacity: 0;
	pointer-events: none;
	overflow: visible !important;
	color: white !important;
	transition: var(--transition);
}

.toast.card.--is-showed {
    transform: translate(-50%, 0);
	opacity: 1;
	pointer-events: all;
}

.toast picture {
	position: relative;
	min-width: 12rem;
	margin: -2rem 0 0 0;
	height: fit-content;
	align-self: flex-end;
}

.toast picture:before {
	content: '';
	display: block;
	padding-bottom: 100%;
}

.toast picture img {
	position: absolute;
	right: 0;
	bottom: 0;
    object-position: bottom right;
}

.toast .social-items {
    margin-top: .5rem;
    flex-wrap: nowrap;
}

.toast .btn.--round {
	margin: .5rem .75rem 0 0;
}


@media screen and (max-width: 640px) {

	.toast.card {
		max-width: calc(100% - 1rem);
		width: 100%;
        grid-template-columns: 1fr;
	}

	.toast .close-btn {
		right: -.5rem;
		top: -.5rem;
	}

    .toast picture {
        display: none;
    }

    .toast .social-items {
        justify-content: space-between;
        flex-wrap: wrap;
    }

    /* .toast .btn.--round {
        width: 3.5rem !important;
        height: 3.5rem;
        margin-right: .125rem;
    }
    
    .toast .btn svg {
        width: 1.75rem;
        height: 1.75rem;
    } */

	.toast br {
		display: none !important;
	}

}

@media screen and (max-width: 375px) {

	/* .toast .btn.--round {
		width: 3rem !important;
		height: 3rem;
	}

	.toast .btn svg {
		width: 1.5rem;
		height: 1.5rem;
	} */

}